嘗試顯示 div 取決于選定的復選框值。但不作業。如果我從復選框中選中總線 12，我想顯示總線 1 和總線 2。假設如果我取消選中總線 12，我想隱藏總線 1 和總線 2。其他類似 Bus34 和 Bus56 的情況相同。怎么做？
app.component.ts：
for (let i = 0; i < formValue.checkboxes.length; i) {
const matchedVal1 = formValue.checkboxes[i];
console.log(matchedVal1);
if(matchedVal1 =="bus-12"){
this.bus1 = true;
this.bus2 = true;
}else{
this.bus1 = false;
this.bus2 = false;
}
if(matchedVal1 =="bus-34"){
this.bus3 = true;
this.bus4 = true;
}else{
this.bus3 = false;
this.bus4 = false;
}
if(matchedVal1 =="bus-56"){
this.bus5 = true;
this.bus6 = true;
}else{
this.bus5 = false;
this.bus6 = false;
}
}
演示：https ://stackblitz.com/edit/angular-checkbox-custom-value-g8wrgu?file=src/app/app.component.ts
uj5u.com熱心網友回復：
提交時，檢查復選框的長度，如果 eq 0 隱藏所有，
submit() {
const checkboxControl = this.checkboxGroup.controls.checkboxes as FormArray;
const formValue = {
...this.checkboxGroup.value,
checkboxes: checkboxControl.value.filter((value) => !!value),
};
this.submittedValue = formValue;
/// hide if no select
if(formValue.checkboxes.length == 0){
alert("no select , hide all");
}
console.log(formValue);
https://angular-checkbox-custom-value-yfg1m2.stackblitz.io/
uj5u.com熱心網友回復：
總線 HTML 顯示無法正常顯示的問題是，每次陣列迭代時，您都會將之前的總線值從 更新true為false。
例子：
檢查：[“bus-12”，“bus-34”]
第一次迭代（“bus-12”）：
結果：
bus1 = true;
bus2 = true;
第二次迭代（“bus-34”）
You will set bus1 and bus2 to false as matchedVal1 != "bus-12" but matchedVal1 == "bus-34.
bus1 = false;
bus2 = false;
bus3 = true;
bus4 = true;
In short, when you tick multiple checkboxes, the last bus group (which is the last ticked checkbox) will only be true.
To fix, you can work with array .includes() to prevent overwriting for the not relevant value.
if (formValue.checkboxes.includes('bus-12')) {
this.bus1 = true;
this.bus2 = true;
} else {
this.bus1 = false;
this.bus2 = false;
}
if (formValue.checkboxes.includes('bus-34')) {
this.bus3 = true;
this.bus4 = true;
} else {
this.bus3 = false;
this.bus4 = false;
}
if (formValue.checkboxes.includes('bus-56')) {
this.bus5 = true;
this.bus6 = true;
} else {
this.bus5 = false;
this.bus6 = false;
}
Sample StackBlitz Demo
uj5u.com熱心網友回復：
I'll have something similar and I do it like this
on the ts I'll add this code
get formValues() {
return this.checkboxGroup.value.checkboxes;
}
so I can get the reference values for the checkbox array. And then on the html I'll do this
<div *ngIf="formValues[0]">Bus1</div>
<div *ngIf="formValues[0]">Bus2</div>
<div *ngIf="formValues[1]">Bus3</div>
<div *ngIf="formValues[1]">Bus4</div>
<div *ngIf="formValues[2]">Bus5</div>
<div *ngIf="formValues[2]">Bus6</div>
But this example works without the submit logic. For the submit logic you can add a flag/ boolean variable like for example submitted and it should go like this
submit() {
this.submitted = true;
}
and only add this to the html
<div *ngIf="formValues[0] && submitted">Bus1</div>
and update it as best works for you
this is the working example https://stackblitz.com/edit/angular-checkbox-custom-value-r4zy3l?file=src/app/app.component.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493808.html
上一篇：如何在金額表中將點轉換為逗號？