我對切換列表有一個獨(dú)特的要求。默認(rèn)情況下，所有 (4) 個切換均為 true。選擇一個開關(guān)時，我希望所有其他開關(guān)設(shè)置為 false，而所選開關(guān)設(shè)置為 true。然后我希望能夠選擇其他人來真正“添加”。我的代碼如下：超文本標(biāo)記語言<mat-list class="list lt-checkbox" [ngClass]="{'selected-all': allTogglesSelected()}"><mat-list-item> <app-icon-switch class="toggle-all" text="All Sydney" [subText]="" icon="" (checkedChange)="onAllChange($event)" [checked]="allTogglesSelected()"> </app-icon-switch></mat-list-item><mat-list-item> <mat-checkbox [checked]="getFilterValue('Toggle_one')" (change)="onToggleChange('Toggle_one', $event)" color="primary" class="toggle">Toggle 1 </mat-checkbox></mat-list-item><mat-list-item> <mat-checkbox [checked]="getFilterValue('Toggle_two')" (change)="onToggleChange('Toggle_two', $event)" color="primary" class="toggle">Toggle 2 </mat-checkbox></mat-list-item><mat-list-item> <mat-checkbox [checked]="getFilterValue('Toggle_three')" (change)="onToggleChange('Toggle_three', $event)" color="primary" class="toggle">Toggle 3 </mat-checkbox></mat-list-item><mat-list-item> <mat-checkbox [checked]="getFilterValue('Toggle_four')" (change)="onToggleChange('Toggle_four', $event)" color="primary" class="toggle">Toggle 4 </mat-checkbox></mat-list-item>切換 TSprivate toggleRegions = ['Toggle_one', 'Toggle_two', 'Toggle_three', 'Toggle_four']; onToggleChange(toggleState: string, value: any) { this.toggleFilters[toggleState] = value.checked; this.saveInStore(); } onAllChange(value: boolean) { const hasChanged = this.toggleRegions.some(r => this.toggleFilters[r] !== value); if (hasChanged) { this.toggleRegions.forEach(r => (this.toggleFilters[r] = value)); this.saveInStore(); } }出于隱私原因，我不得不更改一些名字?；旧希壳暗墓ぷ鞣绞绞菃螕粢粋€切換按鈕將取消選擇它并保持其他選項的選擇，我想要相反的情況。
1 回答
桃花長相依
TA貢獻(xiàn)1860條經(jīng)驗 獲得超8個贊
因此，您似乎沒有使用 Angular 強(qiáng)大的更改檢測來捕獲所有這些值更改。這就是我要做的：
在組件中（請?zhí)砑幽约旱念愋停?/p>
firstToggle: boolean = true;
listItems = [
{
id: 'Toggle_one',
checked: true,
text: 'Toggle 1'
},
{
id: 'Toggle_two',
checked: true,
text: 'Toggle 2'
},
{
id: 'Toggle_three',
checked: true,
text: 'Toggle 3'
},
{
id: 'Toggle_four',
checked: true,
text: 'Toggle 4'
},
]
onToggleChange(id: string, value: any) {
this.listItems = this.listItems.map(item => {
if (item.id === id) {
item.checked = value.checked;
} else {
if (this.firstToggle) {
item.checked = false;
}
}
return item;
})
if (this.firstToggle) {
this.firstToggle = false;
}
this.saveInStore();
}
onAllChange(value: boolean) {
this.listItems = this.listItems.map(item => {
item.checked = value;
return item;
})
this.saveInStore();
}
saveInStore() {
this.store.dispatch(UpdateToggleFilter({ toggleFilters: this.toggleFilters }));
}
在 HTML 中：
<mat-list class="list lt-checkbox" [ngClass]="{'selected-all': allTogglesSelected()}">
<mat-list-item>
<app-icon-switch class="toggle-all" text="All Sydney" [subText]="" icon="" (checkedChange)="onAllChange($event)"
[checked]="allTogglesSelected()">
</app-icon-switch>
</mat-list-item>
<mat-list-item *ngFor="let item of listItems">
<mat-checkbox [checked]="item.checked" (change)="onToggleChange(item.id, $event)" color="primary"
class="toggle">{{item.text}}
</mat-checkbox>
</mat-list-item>
</mat-list>
希望這有幫助！ :)
- 1 回答
- 0 關(guān)注
- 178 瀏覽
添加回答
舉報
0/150
提交
取消