如何让 2 个芯片列表相互交互 Angular Material

Question

我是 angular 的新手，我想实现一个基于 material UI 筹码的表格。用户应该能够选择他们感兴趣的选项的筹码，并且选择的筹码应该在右侧给出，这样会更容易取消选择。

现在我右边的筹码确实更新了，当左边的筹码改变时，但反之则不起作用。

我曾尝试在开发数组对象中使用它们自己的 id 创建字符串，因为我认为这会使显示的筹码成为同一个对象。我也想使用 MatChipList 中的选定数组，但我不知道如何访问它，因为我没有找到它被使用的示例，它只在 Material UI 的文档中提到.

有什么方法可以连接它们并将选定的筹码收集到一个表格中吗？

selecting left chips

deselecting right chips

我一直在考虑使用复选框，但是给我这个任务的人坚持使用筹码。

html 文件:

 <div class="column">

      <mat-chip-list selectable multiple [formControl]="devControl">
        <mat-chip #chip="matChip" (click)="chip.toggleSelected(true)"
          *ngFor="let option of development"
            [selected]="option"
            [value]="option">
          <mat-icon *ngIf="chip.selected">clear</mat-icon>
          {{option}}

        </mat-chip>
      </mat-chip-list>
      <div>Value: {{chipsValue$ | async}}</div>
    </div>
    <div class="column">
      <mat-chip-list selectable multiple [formControl]="devControl">
        <mat-chip #chip="matChip" (click)="chip.toggleSelected(true)"
          *ngFor="let option of devControl.value"
            [selected]="option"
            [value]="option">
          <mat-icon *ngIf="chip.selected">clear</mat-icon>
          {{option}}

        </mat-chip>
      </mat-chip-list>
     </div>

ts 文件：

  development = new Set(["React", "Redux", "Webpack", "Javascript",
  "SCRUM","C#", "Docker"]);

  devControl= new FormControl('');
  chipsValue$ = this.devControl.valueChanges;

https://stackblitz.com/edit/angular-ivy-pudk8d?file=src%2Fapp%2Fskills%2Fskills.component.html

Answer 1

我之前没有特别用过芯片，不过好像最基本的就是需要文字。

您的组件中可能有一个可选技能列表（左侧）？

public selectableSkills: string[] = ['React', 'etc', '...'];

可能是也可能不是更复杂的对象，但基础知识就可以了。

当用户选择一个技能时，您想维护所选技能的列表吗？

public selectedSkills: string[] = [];

public onSkillSelected(skill: string): void {
  if (this.selectedSkills.includes(skill)) return;
  this.selectedSkills.push(skill);
}

public onSkillDeselected(skill: string): void {
  const idx = this.selectedSkills.indexOf(skill);
  if (idx < 0) return;
  this.selectedSkills.splice(idx, 1);
}

然后您的右侧模板可以完全从所选技能中填充，并且可以从列表中清除自己，而左侧填充可用技能，可以根据存在的情况显示为所选已选中。

请注意，使用更有用的对象而不是乏味的字符串，这一切都可以变得更紧密。

<!--LHS-->
<mat-chip-list>
  <mat-chip *ngFor="let skill of selectableSkills
    (click)="onSkillSelected(skill)"
    [selected]="isSelected(skill)"> <!--Not shown; check if skill in the selected list-->
    {{skill}}
    <mat-icon *ngIf="isSelected(skill)"
      (click)="onSkillDeselected(skill)">
      clear
    </mat-icon>
  </mat-chip>
</mat-chip-list>

<!--RHS-->
<mat-chip-list>
  <mat-chip *ngFor="let skill of selectedSkills
    selected>
    {{skill}} 
    <mat-icon (click)="onSkillDeselected(skill)">
      clear
    </mat-icon>
  </mat-chip>
</mat-chip-list>

如何让 2 个芯片列表相互交互 Angular Material

How to make 2 chip lists interact with each other Angular Material

angular-material

angular