文章/答案/技术大牛

发布

社区首页 >问答首页 >ng-模板、mat-selection-list和ngFor

问ng-模板、mat-selection-list和ngFor
EN

Stack Overflow用户

提问于 2018-10-17 05:44:33

回答 1查看 856关注 0票数 0

我通过遵循this文章构建了一个工具提示指令，

我正在尝试将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，问题出在*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>

尽管如此，工具提示仍呈现为无内容。

angular

回答 1

Stack Overflow用户

发布于 2018-10-17 11:55:53

您可能正在为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应该是在字段上设置的属性，其值为fieldPreference对象的“ComponentClass”属性值。

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

mat-option没有selected属性，因此您将无法使用它。如果您想要从列表中选择一个项目，可以使用[(ngModel)]并将selectedField分配给它。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52844440

复制

相似问题

问ng-模板、mat-selection-list和ngFor
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ng-模板、mat-selection-list和ngForEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ng-模板、mat-selection-list和ngFor
EN