Question

我按照this文章构建了工具提示指令，

我正在尝试将templateRef传递给工具提示指令。

下面是我的共享组件，

在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，问题出在*ngFor和ng-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>

仍然，工具提示不显示任何内容。

Answer 1

您可能正在对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。

ng-template，mat-selection-list和ngFor

1 个答案: