Question

当用户打开基于“ available”属性的对话框时，我想显示已经选择的芯片清单。

这是我的HTML模板：

  <mat-chip-list formControlName="sizes" #chipList [multiple]="true" [selectable]="true">

      <mat-chip #chipRef
        *ngFor="let gearSize of gearItemForm.controls['sizes'].value"
        [ngClass]=""
        [selected]="gearSize.available"  
        (click)="gearSize.available = !gearSize.available; onSelectedChipSize()"  
        [color]="gearSize.color">{{ sizeEnum[gearSize.size] }}, {{ gearSize.available }}  
      </mat-chip>

    </mat-chip-list>

      <input
        matInput
        formControlName="sizes"
        placeholder="Gear sizes..."
        [matChipInputFor]="chipList"
        style="display: none;"
        class="gear-size-label"
      >

    <mat-error *ngIf="gearItemForm.get('sizes').invalid && gearItemForm.get('sizes').touched">Please select a size</mat-error>

  </mat-form-field>     
`

只要gearSize.available是true或false，就不会影响[selected]上的mat-chip属性，并且永远不会选择芯片组件。用户始终必须手动更改芯片的颜色。如果mat-chip属性为available，如何显示已经选择的true列表？

Answer 1

我试图创建一个基本的POC来验证您的需求。这是实现的样子。在组件中，我有一个像这样的对象数组：

 import {Component} from '@angular/core';

 /**
  * @title Basic chips
  */
 @Component({
    selector: 'chips-overview-example',
    templateUrl: 'chips-overview-example.html',
    styleUrls: ['chips-overview-example.css'],
  })
  export class ChipsOverviewExample {

     gearItem = [{'item': 'gearItem1', value: true},{'item': 'gearItem2', value: 
                 false}];
  }

然后在html中：

   <mat-chip-list>
      <mat-chip *ngFor="let gearSize of gearItem" [selected]="gearSize.value"></mat-chip>
   </mat-chip-list>

这似乎工作正常，并且可以在此处使用stackblitz链接：MatchipImplementation

如何显示已经选择的Angular Component mat-chip？

1 个答案: