У нас сейчас проблема в том, что мы используем компонент внутри мат-гармошки.
Код выглядит следующим образом
<mat-accordion>
<app-customer-item *ngFor="let customerResult of searchResult.foundCustomers"
(emitter)="sendNotification($event)"
(goToCustomer)="goToCustomer($event)"
[customer]="customerResult" [searchTerm]="searchCriteria?.searchTerm"
[tabName]="Customers">
</app-customer-item>
</mat-accordion>
Однако это будет отображаться с тегом <app-customer-item>, что приведет к некорректному отображению HTML и неправильному отображению аккордеона.
У app-customer-item есть корень mat-expansion-panel.
Затем мы обнаружили, что можем использовать селектор атрибута, как описано здесь: https://paulsalaets.com/posts/angular-component-and-child-selectors
Когда мы это делаем, мы получаем следующее обоснованное сообщение об ошибке:
Ошибка: «Uncaught (в обещании): ошибка: ошибки синтаксического анализа шаблона: этому элементу соответствует несколько компонентов. Убедитесь, что только один компонент выбора может соответствовать данному элементу. Конфликтующие компоненты: MatExpansionPanel, CustomerItemComponent (» [ ОШИБКА ->] [ОШИБКА ->] http://localhost:4200/vendor.js:39013:17 ./node_modules/@angular/compiler/fesm5/compiler.js/TemplateParser.prototype.parse@http://localhost:4200/vendor.js:56897:19 ./node_modules/@angular/compiler/fesm5/ compiler.js/JitCompiler.prototype._parseTemplate@http://localhost:4200/vendor.js:62443:16 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileTemplate@http://localhost:4200/vendor.js:62430:18 ./node_modules/@angular/ compiler / fesm5 / compiler.js / JitCompiler.prototype._compileComponents / <@ <a href="http://localhost:4200/vendor.js:62373:56" rel="nofollow noreferrer">http://localhost:4200/vendor.js:62373:56 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileComponents@http://localhost:4200/vendor.js:62373:9. /node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents/<@<a href="http://localhost:4200/vendor.js:62283:13" rel="nofollow noreferrer">http://localhost:4200/vendor.js:62283:13 затем @ * 1 034 *http://localhost:4200/vendor.js:39004:77 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents@http://localhost:4200/vendor.js:62282:16 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype .compileModuleAsync @ 1039 *. /core/fesm5/core.js/SystemJsNgModuleLoader.prototype.loadAndCompile/<@<a href="http://localhost:4200/vendor.js:80917:44" rel="nofollow noreferrer">http://localhost:4200/vendor.js:80917:44 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2733:17 onInvoke @ http://localhost:4200/vendor.js:79900:24 ./ node_modules / zone.js / dist / zone.js / http://localhost:4200/polyfills.js:2732:17 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2483:24 scheduleResolveOrReject / <@ <a href="http://localhost:4200/polyfills.js:3217:29" rel="nofollow noreferrer">http://localhost:4200/polyfills.js:3217:29 ./node_modules/zone.js/ dist / zone.js / http://localhost:4200/polyfills.js:2766:17 onInvokeTask @ http://localhost:4200/vendor.js:79891:24 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2765:17 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2533:28 dumpMicroTaskQueue @ http://localhost:4200/polyfills.js:2940:25 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2845:21 invokeTask @ http://localhost:4200/polyfills.js:3885:9 globalZoneAwareCallback @ http://localhost:4200/polyfills.js:3911:17 "resolPromise11Angular core.js: 14597
Очевидно, что *ngFor создаст несколько элементов, которые будут соответствовать. Но нам нужно несколько составляющих элементов внутри.
Вот окончательный код:
<mat-accordion>
<mat-expansion-panel app-customer-item *ngFor="let customerResult of searchResult.foundCustomers"
(emitter)="sendNotification($event)"
(goToCustomer)="goToCustomer($event)"
[customer]="customerResult" [searchTerm]="searchCriteria?.searchTerm"
[tabName]="Customers">
</mat-expansion-panel>
</mat-accordion>
Есть предложения как это исправить? Спасибо!