我是 angular 的新手，我想實作一個基于材質 UI 芯片的表單。用戶應該能夠選擇他們感興趣的籌碼，然后選擇的籌碼應該在右側給出，這樣取消選擇會更容易。
現在我的右邊的芯片會更新，當左邊的芯片被改變時，但它不會以其他方式作業。
我試圖在開發陣列物件中使用自己的 id 制作字串，因為我認為這會使顯示的芯片成為相同的物件。我還想使用來自 MatChipList 的選定陣列，但我不知道如何訪問它，因為我沒有找到使用它的示例，并且僅在 Material UI 的檔案中提到了它。
有沒有辦法將它們連接起來并將選定的籌碼收集到一個表格中？
選擇左籌碼
取消選擇正確的籌碼
我正在考慮使用復選框，但給我這個任務的人堅持使用籌碼。
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/app/skills/skills.component.html
uj5u.com熱心網友回復：
我之前沒有特別使用過芯片，但似乎關于它們最基本的事情是它們需要文本。
您的組件中可能有一個可選技能串列（左側）？
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/345621.html
上一篇：字典分組按鍵的子串