Barista: [拡張可能なセクション] `expanded`プロパティに対してブール強制が正しく機能しない

作成日 2020年08月10日 · 13コメント · ソース: dynatrace-oss/barista

バグレポート

ハウディチーム！ expandedプロパティは強制では機能していないようですが、 [expanded]="true"として設定すると正しく機能します。これは長い間正常に機能していましたが、最近機能を停止し、本番ページの1つが正しくレンダリングされないようにしています： https ：

予想される行動

私は以下がいつものように機能することを期待しています：
<dt-expandable-section expanded>

現在の動作

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)

考えられる解決策

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

再現する手順

クローン： https ：

使用バージョン：

@ dynatrace / barista-components ：7.6.0

頑張ってくれてありがとう！

bug has-pr

ソース

areknow

最も参考になるコメント

@lukasholzer投稿に記載されているコマンドに従って、問題なくプロジェクトを実行できます

josecolella 2020年08月12日

👍3

全てのコメント13件

ねえ@areknowこれを報告してくれてありがとう、しかし私はこれをstackblitzで再現することはできません
https://stackblitz.com/edit/github-yp9pwy?file=src/expandable -section /expandable-section-default-example/expandable-section-default-example.html

さらに、コードを見ると、 coerceBooleanPropertyが使用されています。 🤔

コンポーネントを正しく使用していますか？

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 2020年08月11日

こんにちは@lukasholzer！また、stackblitzで再現できなかったため、最小限のリポジトリを作成しました。これは、ビューレンダラーでは発生しないツタの問題を示している可能性があります。リポジトリのクローンを作成して、コンソールエラーを確認できましたか？

areknow 2020年08月11日

こんにちは@lukasholzer 、
ディレクティブの省略表記を使用して、問題を再現することもできます。

josecolella 2020年08月11日

👍1

@areknowアプリで拡張可能なマテリアルを使用して、動作を比較してみてください。ツタの互換性に関するコンパイルの問題があるかどうか知りたいです。これは最小限のセットアップになりますhttps://stackblitz.com/edit/angular-rubmxc?file=src/app/expansion-steps-example.html

ffriedl89 2020年08月12日

@areknowリポジトリのクローンを作成し、npmをインストールして、ngサーブを実行しました。

そのほかにアップデートしてくださいhighchartsバージョンを削除し、 @types/highcharts

lukasholzer 2020年08月12日

@ ffriedl89 MatExpansionModuleをインポートし、コンポーネントマークアップをプロジェクトに追加しました。これは、省略形のディレクティブ表記で完全に正常に実行されます。
Screen Shot 2020-08-12 at 9 43 20 AM

@lukasholzer @types/highchartsを削除し、 highchartsを最新バージョンに更新しました。それでも同じ問題：

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 2020年08月12日

@areknowアプリを提供したいときに上記のエラーが表示されたので、再現不可能なラベルを付けました。だから私はアプリケーションを提供することはできません。

あなたのリポジトリを私のために実行させることはできません。

私が行った手順：

git clone ...
npm install
ng serve

lukasholzer 2020年08月12日

@ lukasholzer3台の別々のマシンでリポジトリを実行しました。問題が何であるかわからない、その超基本的なプロジェクト🤔
@josecolella @toddbaertもリポジトリを実行しており、同じ問題が発生しています。

~/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 2020年08月12日

@lukasholzer投稿に記載されているコマンドに従って、問題なくプロジェクトを実行できます

josecolella 2020年08月12日

👍3

@lukasholzer Iも、正常なコンパイルメッセージで問題を再現することができました。