ng-template,mat-selection-list和ngFor?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (121)

我按照这篇文章建立了一个工具提示指令,

我试图传递templateRef给tooltip指令。

以下是我的共享组件,

在ts,

@Input() fieldPreferences: IFieldPreference[];

在HTML,

<mat-selection-list #list>
  <mat-list-option  
    *ngFor="let preference of fieldPreferences"
    [selected]="preference.selected"
    (click)="showPreferenceChanged(list)"
    [value]="preference.field">
    {{preference.field}}
  </mat-list-option>
</mat-selection-list>

在父母,

<mat-icon tooltip [content]="template">settings</mat-icon>

<ng-template #template>
 <field-preferences
    [fieldPreferences]="fieldPreferences"
    (selectedFields)="showPreferenceChanged($event)">
 </field-preferences>
</ng-template>

工具提示显示mat-list-option没有生成任何内容(即)。根据这个SO OP,问题在于*ngForng-template

我试着改成它,

<mat-selection-list #list>
  <mat-list-option  ngFor let-preference [ngForOf]="fieldPreferences"
      [selected]="preference.selected"
      (click)="showPreferenceChanged(list)"
      [value]="preference.field">
      {{preference.field}}
    </mat-list-option>
  </mat-selection-list>

仍然,工具提示是在没有内容的情况下呈现的。

提问于
用户回答回答于

你可能正在使用一些旧的指令mat-select-list。以下是您为案例创建的方法:

<mat-select #list [(ngModel)]="selectedField">
  <mat-option 
      *ngFor="let preference of fieldPreferences"
      (click)="showPreferenceChanged(list)"
      [value]="preference.field">
      {{preference.field}}
  </mat-option>
</mat-select>

selectedField应该是在ComponentClass上设置的属性,其值为fieldPreference对象的“field”属性。

@Input() fieldPreferences: IFieldPreference[];
selectedField = 'One of the items from the fieldPreferences will go here';

mat-option没有selected财产,所以你将无法使用它。如果您想从列表中选择一个项目,则可以使用[(ngModel)]并分配selectedField给它。

扫码关注云+社区

领取腾讯云代金券