html - 在 Angular 材料中设置默认芯片

Question

我会在页面加载时选择网络默认芯片。

     <mat-chip-list #chipsList >
        <mat-chip (click)="selectedChip(elm)" color="accent" selected="true" *ngFor="let elm of objectKeys" [value]="elm" color="accent">
          {{elm}}
        </mat-chip>
      </mat-chip-list>

实际上没有选择芯片。我会选择列表中的第一个筹码。

当我console.log(this.chipsList)看到所有选定的项目都设置为 true 但没有人专注于 UI 时。

如何默认选择芯片？

这是一个演示

Answer 1

首先在打字稿中设置默认值：

tmpindex: number = 0;

现在像这样在你的html中。

<mat-chip (click)="selectedChip(elm);tmpindex=i;" 
          color="accent" [selected]="i===tmpindex" 
          *ngFor="let elm of objectKeys; let i = index" 
          [value]="elm" color="accent">
     {{elm}}</mat-chip>
</mat-chip-list>

这是工作示例：设置默认芯片列表

希望这可以帮助！！！！

Answer 2

尝试在 ngFor中使用索引：

 <mat-chip (click)="selectedChip(elm)" color="accent" [selected]="index === 0" *ngFor="let elm of objectKeys; let index = index" [value]="elm" color="accent">
          {{elm}}</mat-chip>
      </mat-chip-list>

https://stackblitz.com/edit/angular-material-chip-default-select-vsexxr?file=app%2Fapp.component.html

甚至更好，首先：

[selected]="first" *ngFor="let elm of objectKeys; let first = first"

Answer 3

尝试将 selected="Web" 更改为 [selected]="this.selected === elm"