Использование ngfor asyn c pipe в ng-template

Question

Я пробовал с asyn c pipe на div, работает. но если я попробую с ng-шаблоном, это не получится.

<ng-container *ngFor="let item of 
    portfolios$ | async; let index=i">
    <mat-form-field class="col-6">
        <mat-label>Select Client</mat-label>
        <mat-select formControlName="clientID" 
            matInput (selectionChange)="changeClient($event.value)">
            <mat-option >
                {{ c.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="col-6">
        <mat-label>Select Portfolio</mat-label>
        <mat-select formControlName="portfolioID" 
            matInput (selectionChange)="updateFormValuesToStore($event)">
            <mat-option *ngFor="let c of 
                item.Portfolio">
                {{ c.portfolioName }}
            </mat-option>
        </mat-select>
    </mat-form-field>
</ng-container>

Есть предложения?

Answer 1

Если вы хотите сослаться на <ng-template #name> в нескольких местах, вы должны создать один <ng-template> и затем отобразить его в <ng-container>, используя *ngTemplateOutlet="name"

. В вашей ситуации вы бы что-то сделали как это:

<ng-container *ngTemplateOutlet="portfolios"></ng-container>
<ng-container *ngTemplateOutlet="portfolios"></ng-container>

<ng-template #portfolios>
  <div *ngFor="let item of portfolios$ | async">
    {{item}}
  </div>
</ng-template>

DEMO: https://stackblitz.com/edit/angular-jkcfds

Как применить это к вашему примеру

В свете вашего обновленного примера вы применил бы эту концепцию следующим образом:

<mat-form-field class="col-6">
  <mat-label>Select Client</mat-label>
  <mat-select formControlName="clientID" matInput 
      (selectionChange)="changeClient($event.value)">
    <mat-option >
      {{ c.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="col-6">
  <mat-label>Select Portfolio</mat-label>
  <mat-select formControlName="portfolioID" matInput 
      (selectionChange)="updateFormValuesToStore($event)">
    <ng-container *ngTemplateOutlet="#portfolioOptions">
    </ng-container>
  </mat-select>
</mat-form-field>

<ng-template #portfolioOptions>
  <ng-container *ngFor="let item of portfolios$ | async">
    <mat-option *ngFor="let c of item.Portfolio">
      {{ c.portfolioName }}
    </mat-option>
  </ng-container>
</ng-template>

Обратите внимание, как я ограничиваю l oop для создания только опций. Я скопировал ваш l oop logi c, как он есть в вашем вопросе, даже если он выглядит немного странным для меня.

Answer 2

Вы, вероятно, должны использовать <ng-container> вместо этого, что более уместно.

<ng-container *ngFor="let item of portfolios$ | async; let index=i">
   {{ item }}
</ng-container>

Вот ссылка на документацию