我试图在带有模板出口的 mat-select 中传递#tmp,但无法显示选择选项。下面是我的代码和 stackblitz 的链接
<mat-form-field>
<mat-select
[ngModel]="selectedFoods"
(ngModelChane)="selectedFoods" placeholder="Favorite food" multiple>
<ng-container *ngFor="let food of allfoods"
[ngTemplateOutlet]="tmp"
[ngTemplateOutletContext]="{ $implicit: food}">
</ng-container>
</mat-select>
</mat-form-field>
<ng-template #tmp let-food>
<mat-option [value]="food.value">
{{food.viewValue}}
</mat-option>
</ng-template>
这似乎有效。我认为重要的部分仍然是在
<mat-options>
中包含 <mat-select>
,而不是作为模板的一部分。
<mat-form-field>
<mat-select>
<mat-option *ngFor="let food of allfoods" [value]="food.value">
<ng-container [ngTemplateOutlet]="tmp" [ngTemplateOutletContext]="{food: food}">
</ng-container>
</mat-option>
</mat-select>
</mat-form-field>
<ng-template #tmp let-food="food">
{{food.viewValue}} <b> From Tmp</b>
</ng-template>
你必须将 ng-template 放入 mat-select 中:
<mat-form-field>
<mat-select [ngModel]="selectedFoods" (ngModelChane)="selectedFoods"
placeholder="Favorite food" multiple>
<ng-container *ngFor="let food of allfoods"
[ngTemplateOutlet]="tmp" [ngTemplateOutletContext]="{ $implicit: food}">
</ng-container>
<ng-template #tmp let-food>
<mat-option [value]="food.value">
{{food.viewValue}}
</mat-option>
</ng-template>
</mat-select>
</mat-form-field>
这是一个工作示例:stackblitz