Barista: [القسم القابل للتوسيع] الإكراه المنطقي لا يعمل بشكل صحيح للخاصية "الموسعة"

تم إنشاؤها على ١٠ أغسطس ٢٠٢٠  ·  13تعليقات  ·  مصدر: dynatrace-oss/barista

تقرير الشوائب

مرحبا يا فريق! يبدو أن الخاصية expanded لا تعمل بالإكراه ، لكنها تعمل بشكل صحيح إذا تم تعيينها على النحو التالي: [expanded]="true" . كان هذا يعمل بشكل جيد لفترة طويلة ، ولكنه توقف مؤخرًا عن العمل ويمنع عرض إحدى صفحات الإنتاج الخاصة بي بشكل صحيح: https://ci360.dynatrace.com/account/environment/cloud/managed/298

سلوك متوقع

أتوقع أن يعمل ما يلي كالمعتاد:
<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://github.com/areknow/a-expandable-section-demo وتشغيل

الإصدارات المستخدمة:

  • @ dynatrace / باريستا المكونات : 7.6.0

شكرا جزيلا لكم على عملكم الشاق!

bug has-pr

التعليق الأكثر فائدة

lukasholzer باتباع الأوامر المذكورة في رسالتك ، سأتمكن من تشغيل المشروع دون أي مشكلة

ال 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! لم أتمكن أيضًا من التكاثر في stackblitz لذلك قمت بإنشاء الحد الأدنى من الريبو. قد يشير هذا إلى وجود مشكلة في Ivy والتي لا تحدث مع عارض العرض. هل كنت قادرًا على استنساخ الريبو ورؤية خطأ وحدة التحكم؟

مرحبا lukasholzer ،
أنا قادر أيضًا على إعادة إنتاج المشكلة ، باستخدام الترميز المختصر للتوجيه.

areknow هل يمكنك محاولة استخدام المادة القابلة للتوسيع في تطبيقك ومقارنة السلوك. لدي فضول لمعرفة ما إذا كان لدينا بعض مشاكل التجميع مع توافق اللبلاب. سيكون هذا الحد الأدنى من الإعداد https://stackblitz.com/edit/angular-rubmxc؟file=src/app/expansion -steps-example.html

areknow لقد قمت باستنساخ الريبو الخاص بك وقمت بتثبيت npm والآن خدمة ng:

image

بالإضافة إلى ذلك ، يُرجى تحديث إصدار highcharts وإزالة @types/highcharts

@ 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 لقد وضعت التسمية غير القابلة للتكرار عليها كما أرى الخطأ أعلاه عندما أريد خدمة التطبيق. لذلك لا يمكنني خدمة التطبيق.

ليس من الممكن أن تدع الريبو الخاص بك يعمل من أجلي.

الخطوات التي قمت بها:

  1. git clone ...
  2. npm install
  3. ng serve

lukasholzer لقد قمت بتشغيل الريبو على ثلاث أجهزة منفصلة. لست متأكدًا من المشكلة ، إنه مشروع أساسي فائق
josecolellatoddbaert وأيضا تشغيل الريبو، وشهدت نفس القضية.

~/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 باتباع الأوامر المذكورة في رسالتك ، سأتمكن من تشغيل المشروع دون أي مشكلة

lukasholzer لقد

  1. استنساخ بوابة الريبو
  2. تثبيت npm
  3. يخدم ng

نتائج:
Screen Shot 2020-08-12 at 12 03 13 PM
Screen Shot 2020-08-12 at 12 03 07 PM
Screen Shot 2020-08-12 at 12 02 47 PM
Screen Shot 2020-08-12 at 11 57 00 AM

areknow يا thomaspink وأنا وجدت المشكلة التي setter وهي viewChild حتى وقت لاحق Lifecycle. 🤔

هل هذا إصلاح عاجل بالنسبة لك أم أنك بخير للحصول عليه مع 8.0.0 وإلا يتعين علينا عمل منفذ خلفي لهذه المشكلة.

تم الإصلاح بواسطة PR # 1491

lukasholzer هذه أخبار رائعة! لقد أجريت إصلاحًا سريعًا لتطبيقي ، لذا يمكنني الانتظار حتى الإصدار 8.0.0. شكرا!

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات