Barista: [Seção expansível] A coerção booleana não está funcionando corretamente para a propriedade `expandida`

Criado em 10 ago. 2020 · 13Comentários · Fonte: dynatrace-oss/barista

Relatório de erro

Olá equipe! Parece que a propriedade expanded não está funcionando com coerção, mas está funcionando corretamente se configurada como: [expanded]="true" . Isso funcionou bem por um longo tempo, mas recentemente parou de funcionar e está impedindo uma das minhas páginas de produção de renderizar corretamente: https://ci360.dynatrace.com/account/environment/cloud/managed/298

Comportamento esperado

Espero que o seguinte funcione normalmente:
<dt-expandable-section expanded>

Comportamento Atual

TypeError: Cannot set property 'expanded' of undefined
    at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
    at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
    at setInputsFromAttrs (core.js:13039)
    at instantiateAllDirectives (core.js:12752)
    at createDirectivesInstances (core.js:11989)
    at Module.ɵɵelementStart (core.js:21043)
    at AppComponent_Template (app.component.html:1)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at renderComponent (core.js:13244)

Solução possível

<dt-expandable-section [expanded]="true">

Passos para reproduzir

clone: https://github.com/areknow/a-expandable-section-demo e execute

Versões usadas:

@ dynatrace / barista-components : 7.6.0

Muito obrigado pelo seu trabalho árduo!

bug has-pr

Fonte

areknow

Comentários muito úteis

@lukasholzer Seguindo os comandos declarados em sua postagem, poderei executar o projeto sem nenhum problema

josecolella em 12 ago. 2020

👍3

Todos 13 comentários

Ei @areknow, muito obrigado por relatar isso, mas não posso reproduzir isso no stackblitz
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable -section / expandable-section-default-example / expandable-section-default-example.html

Além disso, quando vejo o código, coerceBooleanProperty é usado. 🤔

Tem certeza de que está usando o componente corretamente?

https://github.com/dynatrace-oss/barista/blob/master/libs/barista-components/expandable-section/src/expandable-section.ts#L76

  @Input()
  get expanded(): boolean {
    return this._panel.expanded;
  }
  set expanded(value: boolean) {
    this._panel.expanded = coerceBooleanProperty(value);
    this._changeDetectorRef.markForCheck();
  }

lukasholzer em 11 ago. 2020

Olá @lukasholzer! Eu também não consegui reproduzir no stackblitz, então criei um repositório mínimo. Isso pode indicar um problema com ivy que não está acontecendo com o visualizador de renderização. Você conseguiu clonar o repo e ver o erro do console?

areknow em 11 ago. 2020

Olá @lukasholzer ,
Também consigo reproduzir o problema com a notação abreviada da diretiva.

josecolella em 11 ago. 2020

👍1

@areknow Você poderia tentar usar o material expansível em seu aplicativo e comparar o comportamento. Estou curioso para saber se temos algum problema de compilação com compatibilidade com ivy. Esta seria uma configuração mínima https://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion -steps-example.html

ffriedl89 em 12 ago. 2020

@areknow, eu

além disso, atualize a versão highcharts e remova o @types/highcharts

lukasholzer em 12 ago. 2020

@ ffriedl89 Importei MatExpansionModule e adicionei a marcação de componente ao projeto, ele funciona perfeitamente bem com a notação de diretiva abreviada.
Screen Shot 2020-08-12 at 9 43 20 AM

@lukasholzer Eu removi @types/highcharts e atualizei highcharts para a versão mais recente. Ainda o mesmo problema:

core.js:6185 ERROR TypeError: Cannot set property 'expanded' of undefined
    at DtExpandableSection.set expanded [as expanded] (dynatrace-barista-components-expandable-section.js:79)
    at Object.ngOnChangesSetInput [as setInput] (core.js:26879)
    at setInputsFromAttrs (core.js:13039)
    at instantiateAllDirectives (core.js:12752)
    at createDirectivesInstances (core.js:11989)
    at Module.ɵɵelementStart (core.js:21043)
    at AppComponent_Template (app.component.html:1)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at renderComponent (core.js:13244)

areknow em 12 ago. 2020

@areknow coloquei o rótulo não reproduzível nele, pois vejo o erro acima quando desejo veicular o aplicativo. Portanto, não posso atender ao aplicativo.

Não é possível permitir que seu repositório seja executado para mim.

Passos que fiz:

git clone ...
npm install
ng serve

lukasholzer em 12 ago. 2020

@lukasholzer Eu
@josecolella @toddbaert também executou o repo e teve o mesmo problema.

~/Desktop/test
❯ git clone https://github.com/areknow/a-expandable-section-demo.git .
Cloning into '.'...
remote: Enumerating objects: 47, done.
remote: Counting objects: 100% (47/47), done.
remote: Compressing objects: 100% (37/37), done.
remote: Total 47 (delta 10), reused 45 (delta 8), pack-reused 0
Unpacking objects: 100% (47/47), done.

~/Desktop/test master
❯ ls
README.md          angular.json       browserslist       e2e                karma.conf.js      package-lock.json  package.json       src                tsconfig.app.json  tsconfig.json      tsconfig.spec.json tslint.json

~/Desktop/test master
❯ npm i

> [email protected] install /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/watchpack-chokidar2/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

> [email protected] install /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Darwin 19.5.0
gyp ERR! command "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/bin/node" "/Users/arnaud.crowther/.nvm/versions/node/v12.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arnaud.crowther/Desktop/test/node_modules/webpack-dev-server/node_modules/fsevents
gyp ERR! node -v v12.16.1
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok

> [email protected] postinstall /Users/arnaud.crowther/Desktop/test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/[email protected] postinstall /Users/arnaud.crowther/Desktop/test/node_modules/@angular/cli
> node ./bin/postinstall/script.js

added 1391 packages from 1132 contributors and audited 1393 packages in 20.393s

41 packages are looking for funding
  run `npm fund` for details

found 5 vulnerabilities (3 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

~/Desktop/test master 22s
❯ ng serve
0% compiling
Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/cdk/tree : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @dynatrace/barista-components/core : es2015 as esm2015

Compiling @dynatrace/barista-components/icon : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/cdk/table : es2015 as esm2015

Compiling @angular/cdk/drag-drop : es2015 as esm2015

Compiling @dynatrace/barista-components/button : es2015 as esm2015

Compiling @dynatrace/barista-components/indicator : es2015 as esm2015

Compiling @dynatrace/barista-components/empty-state : es2015 as esm2015

Compiling @dynatrace/barista-components/form-field : es2015 as esm2015

Compiling @dynatrace/barista-components/formatters : es2015 as esm2015

Compiling @angular/cdk/text-field : es2015 as esm2015

Compiling @dynatrace/barista-components/input : es2015 as esm2015

Compiling @dynatrace/barista-components/checkbox : es2015 as esm2015

Compiling @dynatrace/barista-components/pagination : es2015 as esm2015

Compiling @dynatrace/barista-components/table : es2015 as esm2015

Compiling @dynatrace/barista-components/expandable-panel : es2015 as esm2015

Compiling @dynatrace/barista-components/expandable-section : es2015 as esm2015

Compiling @angular/cdk/accordion : es2015 as esm2015

Compiling @angular/material/expansion : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 14 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 150 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 108 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.99 MB [initial] [rendered]
Date: 2020-08-12T15:43:23.068Z - Hash: 1ecde4c6e7201f777336 - Time: 57275ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-08-12T15:43:24.031Z - Hash: 1ecde4c6e7201f777336
5 unchanged chunks

Time: 537ms
: Compiled successfully.

areknow em 12 ago. 2020

@lukasholzer Seguindo os comandos declarados em sua postagem, poderei executar o projeto sem nenhum problema

josecolella em 12 ago. 2020

👍3

@lukasholzer I também foi capaz de reproduzir o problema com uma mensagem de compilação bem-sucedida.

Repo git clonado
npm install
ng serve

Resultados:
Screen Shot 2020-08-12 at 12 03 13 PM

Screen Shot 2020-08-12 at 11 57 00 AM

cmp11290 em 12 ago. 2020

👍1

@areknow hey @thomaspink e eu descobrimos o problema que iremos corrigir! :) Queremos saber como isso pode funcionar mesmo no VE, já que estamos tentando definir uma propriedade no setter que é um viewChild tão posterior ao Lifecycle. 🤔

Esta é uma solução urgente para você ou você está ok para obtê-la com 8.0.0, caso contrário, teremos que fazer um backport para este problema.

lukasholzer em 13 ago. 2020

Corrigido por PR # 1491

thomaspink em 13 ago. 2020

@lukasholzer isso é uma ótima notícia! Eu executei um hot fix para meu aplicativo, então posso esperar até 8.0.0. Obrigado!

areknow em 13 ago. 2020

👍1

Esta página foi útil?

0 / 5 - 0 avaliações

Questões relacionadas

Pesquisa: Combobox / Select as webcomponents

ffriedl89 · 11Comentários

[Campo de filtro]: Adicione informações sobre o nível de interação no campo de filtro.

tomheller · 4Comentários

Elementos Fluidos: Provedor de Sistema de Projeto

lukasholzer · 8Comentários

Melhorar a visibilidade de entradas desativadas

beeme1mr · 7Comentários

Inconsistências na interação com Chart heatfiled / selection Area e ContextDialog

Sherif-Elhefnawy · 7Comentários