шаблон-выход внутри мат-выбор не работает

Question 1

Я пытаюсь передать #tmp в mat-select с шаблоном-выходом, и я не могу отобразить параметры выбора. Ниже мой код и ссылка на 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>

https://stackblitz.com/edit/angular-mat-select-with-ngmodel-mujorn?embed=1&file=app/select-overview-example.ts

angular angular-content-projection

0

anonymous 6 Окт 2020 в 15:54

Answer

Кажется, это работает. Я думаю, что важная часть по-прежнему состоит в том, чтобы <mat-options> внутри <mat-select>, а не как часть шаблона.

https://stackblitz.com/edit/mat-select-with-ngtemplateoutlet-example?devtoolsheight=33&file=app/select-overview-example.html

<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>

Раскрывающийся список, показывающий значение шаблона в выборе

2

Stephen Cooper 28 Фев 2021 в 14:32

Question 2

Кажется, это работает. Я думаю, что важная часть по-прежнему состоит в том, чтобы <mat-options> внутри <mat-select>, а не как часть шаблона.

https://stackblitz.com/edit/mat-select-with-ngtemplateoutlet-example?devtoolsheight=33&file=app/select-overview-example.html

<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>

Раскрывающийся список, показывающий значение шаблона в выборе

2

Stephen Cooper 28 Фев 2021 в 14:32

шаблон-выход внутри мат-выбор не работает

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

angular