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。

如何默认选择芯片？

这里是demo

Answer 1

尝试将selected =“ Web”更改为[selected] =“ this.selected ===榆木”

Answer 2

尝试在ngFor中使用 index ：

 <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>

这是有效的示例：Set default chip list

希望这有帮助！!!!

在Angular材质中设置默认芯片

3 个答案: