在Angular材質中設置默認芯片

Question

頁面加載時，我會選擇Web作為默認芯片。

     <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

嘗試將selected =“ Web”更改為[selected] =“ this.selected === elm”

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

首先在打字稿中設置默認值：

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>

這是工作示例： 設置默認芯片列表

希望這可以幫助！！！！