Barista: [Expandable Section] Boolescher Zwang funktioniert nicht richtig für die `erweiterte` Eigenschaft
Fehlerbericht
Hallo Team! Es scheint, dass die Eigenschaft expanded nicht mit Zwang funktioniert, aber korrekt funktioniert, wenn sie wie folgt festgelegt ist: [expanded]="true" . Dies funktionierte lange Zeit einwandfrei, funktionierte aber erst seit kurzem nicht mehr und verhindert das korrekte Rendern einer meiner Produktionsseiten: https://ci360.dynatrace.com/account/environment/cloud/managed/298
Erwartetes Verhalten
Ich erwarte, dass Folgendes wie gewohnt funktioniert:
<dt-expandable-section expanded>
Aktuelles Verhalten
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)
Mögliche Lösung
<dt-expandable-section [expanded]="true">
Schritte zum Reproduzieren
Klonen: https://github.com/areknow/a-expandable-section-demo und ausführen
Gebrauchte Versionen:
- @dynatrace/barista-components : 7.6.0
Vielen Dank für Ihre Mühe!
areknow
Alle 13 Kommentare
Hey @areknow vielen Dank, dass du das
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable -section/expandable-section-default-example/expandable-section-default-example.html
Wenn ich mir den Code ansehe, wird außerdem coerceBooleanProperty verwendet. 🤔
Sind Sie sicher, dass Sie die Komponente richtig verwenden?
@Input()
get expanded(): boolean {
return this._panel.expanded;
}
set expanded(value: boolean) {
this._panel.expanded = coerceBooleanProperty(value);
this._changeDetectorRef.markForCheck();
}
lukasholzer
am 11. Aug. 2020
Hallo @lukasholzer! Ich war auch nicht in der Lage, in Stackblitz zu reproduzieren, also habe ich ein minimales Repo erstellt. Dies kann auf ein Problem mit Efeu hinweisen, das mit dem View-Renderer nicht auftritt. Konnten Sie das Repository klonen und den Konsolenfehler sehen?
areknow
am 11. Aug. 2020
Hallo @lukasholzer ,
Ich kann das Problem auch mit der Kurzschreibweise für die Richtlinie reproduzieren.
josecolella
am 11. Aug. 2020
@areknow Könnten Sie versuchen, das erweiterbare Material in Ihrer App zu verwenden und das Verhalten zu vergleichen. Ich bin gespannt, ob wir ein Kompilierungsproblem mit der Efeu-Kompatibilität haben. Dies wäre ein minimales Setup https://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion -steps-example.html
ffriedl89
am 12. Aug. 2020
@areknow Ich habe dein Repo geklont, eine npm-Installation durchgeführt und jetzt ein ng-Serve:
außerdem aktualisiere bitte die highcharts Version und entferne die @types/highcharts
lukasholzer
am 12. Aug. 2020
@ffriedl89 Ich habe MatExpansionModule importiert und das Komponenten-Markup zum Projekt hinzugefügt.
@lukasholzer Ich habe @types/highcharts und highcharts auf die neueste Version aktualisiert. Immer noch das gleiche Problem:
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 Ich habe das nicht reproduzierbare Etikett darauf gesetzt, da ich den obigen Fehler sehe, wenn ich die App
Es ist nicht möglich, Ihr Repo für mich laufen zu lassen.
Schritte, die ich gemacht habe:
git clone ...npm installng serve
lukasholzer
am 12. Aug. 2020
@lukasholzer Ich habe das Repo auf drei separaten Maschinen ausgeführt. Ich bin mir nicht sicher, was das Problem ist, es ist ein super einfaches Projekt 🤔
@josecolella @toddbaert haben auch das Repo ausgeführt und das gleiche Problem gesehen.
~/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.
@lukasholzer Wenn ich die Befehle in deinem Beitrag Probleme ausführen
josecolella
am 12. Aug. 2020
@lukasholzer Auch ich konnte das Problem mit erfolgreicher Kompilierungsmeldung reproduzieren.
- Geklontes Git-Repository
- npm installieren
- ng dienen
Ergebnisse:
cmp11290
am 12. Aug. 2020
@areknow hey @thomaspink und ich haben das Problem gefunden, das wir beheben werden! :) Ich frage mich, wie dies sogar in VE funktionieren kann, da wir versuchen, eine Eigenschaft für setter festzulegen, die ein viewChild, also späterer Lebenszyklus, ist. 🤔
Ist dies ein dringender Fix für Sie oder ist es in Ordnung, ihn mit 8.0.0 zu bekommen, sonst müssen wir für dieses Problem einen Backport durchführen.
lukasholzer
am 13. Aug. 2020
Behoben durch PR Nr. 1491
thomaspink
am 13. Aug. 2020
@lukasholzer das sind tolle Neuigkeiten! Ich habe einen Hotfix für meine App durchgeführt, sodass ich bis 8.0.0 warten kann. Vielen Dank!
areknow
am 13. Aug. 2020
Verwandte Themen
bradking1329
·
3Kommentare
tomheller
·
21Kommentare
b-wohs
·
3Kommentare
schobocop
·
13Kommentare
lukasholzer
·
8Kommentare
Hilfreichster Kommentar
@lukasholzer Wenn ich die Befehle in deinem Beitrag Probleme ausführen