我们目前遇到的问题是我们在垫式手风琴内部使用了一个组件。
代码如下
<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
这样做时，我们会收到以下正当的错误消息：
错误错误：“未捕获（承诺）：错误：模板解析错误：此元素上匹配多个组件。确保只有一个组件的选择器可以匹配给定元素。有冲突的组件：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@{{3 }} ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileComponents/<@http://localhost:4200/vendor.js:62430:18 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileComponents @ http://localhost:4200/vendor.js:62373:56 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents/<@http://localhost:4200/vendor.js:62373:9 then @ http://localhost:4200/vendor.js:62283:13 ./node_ modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype._compileModuleAndComponents @ http://localhost:4200/vendor.js:39004:77 ./node_modules/@angular/compiler/fesm5/compiler.js/JitCompiler.prototype.compileModuleAsync@http://localhost:4200/vendor.js:62282:16 ./node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js/CompilerImpl.prototype.compileModuleAsync@http://localhost:4200/vendor.js:62242:32 ./node_modules/@angular/core/fesm5/core.js/SystemJsNgModuleLoader .prototype.loadAndCompile / <@ http://localhost:4200/vendor.js:144950:16 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2733:17 onInvoke @ http://localhost:4200/vendor.js:80917:44 ./ 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 / <@ http://localhost:4200/vendor.js:79900:24 ./node_modules/zone.js/dist/zone.js/http://localhost:4200/polyfills.js:2766:17 onInvokeTask @ {{3} } ./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：28rainMicroTaskQueue @ http://localhost:4200/polyfills.js:3217:29 ./node _modules / zone.js / dist / zone.js / http：// localhost：4200 / polyfills.js：2845：21 invokeTask @ http://localhost:4200/vendor.js:79891:24 globalZoneAwareCallback @ http://localhost:4200/polyfills.js:2940:25“ resolvePromise11Angular 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>
关于如何解决该问题的任何建议？谢谢！