라디오 버튼으로 표시 할 값 목록이 있습니다. 각 라디오 버튼에는 라디오 버튼을 선택하면 감소되는 특정 개수의 값이 있습니다. radioButton1이 선택되면 카운트는 1이되고 다른 라디오 버튼이이 목록에서 radioButton2가 선택되었다고 말하면 radioButton1의 카운트가 원래 값으로 복원되고 radionButton2의 카운트가 1 감소합니다. 나는 이것에 대한 해결책을 찾으려고 노력했지만 할 수 없었습니다. 어떤 도움이라도 대단히 감사하겠습니다!
app.component.ts
this.itemList = [
{ name: 'item1', count: 1},
{ name: 'item2', count: 2},
{ name: 'item3', count: 3},
{ name: 'item4', count: 2},
{ name: 'item5', count: 1},
]
onRadioSelect(userSelect){
this.itemList.forEach((selected,index)=>{
if(selected.name === userSelect.value){
selected.count -= 1;
if(selected.count === 0){
this.countZeroDisable= index;
}
}
app.component.html
<div *ngFor="let items of itemList; let idx = index" [ngClass]="{'disable': idx===countZeroDisable}">
<input type="radio" name="List1" [value]="items.name" [disabled]="idx===countZeroDisable" (change)= onRadioSelect(List1) #List1>
{{items.name}}({{items.count}})
</div>
다음과 같이 변경하십시오.
.ts
onRadioSelect(userSelect) {
this.itemList.forEach(e => {
if (e['selected']) {
e.count = e.count + 1;
e['selected'] = false;
}
if (e.name === userSelect.value) {
e.count -= 1;
e['selected'] = true;
}
})
}
.html
<div *ngFor="let items of itemList">
<input type="radio" name="List1" [value]="items.name" [disabled]="items.count === 0"
(change)=onRadioSelect(List1) #List1>
{{items.name}}({{items.count}})
</div>
단순화하기 위해 selected 라는 새 필드 가 추가되어 현재 선택된 인덱스를 결정합니다. 인덱스가 이전에 선택된 경우 카운트가 재설정되고 그렇지 않으면 카운트가 증가합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다