我有一個用例，我必須使用 Angular 來呈現我的復選框及其各自的內容。ASK是為了限制用戶一次只能選中一個復選框（即用戶應該能夠選中復選框 A 并禁用復選框 B，反之亦然）。
我知道我應該使用“ ngIf ”指令。但是，我對 Angular 還很陌生，我可以使用專家建議:)
我的代碼：
<div>
<input id="checkbox-one" type="checkbox" />
<label for="checkbox-one">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox1.</span>
</label>
<input id="checkbox-two" type="checkbox" />
<label for="checkbox-two">
<span><svg width="18px" height="18px"><use xlink:href="#check"></use></svg></span>
<span>Checkbox2.</span>
</label>
</div>
CodePen 鏈接
uj5u.com熱心網友回復：
如果您的要求是限制用戶只選擇一個選項，最好使用單選按鈕而不是復選框，因為復選框用于多選而單選按鈕用于單個選項選擇。
uj5u.com熱心網友回復：
如果您只想隱藏它們，您可以使用*ngIf并檢查是否選中了另一個框：
<div>
<ng-container *ngIf="!checkbox2">
<input id="checkbox-one" type="checkbox" [(ngModel)]="checkbox1" />
<label for="checkbox-one">
<span>Checkbox1.</span>
</label>
</ng-container>
<br />
<ng-container *ngIf="!checkbox1">
<input id="checkbox-two" type="checkbox" [(ngModel)]="checkbox2" />
<label for="checkbox-two">
<span>Checkbox2.</span>
</label>
</ng-container>
</div>
你也可以只禁用另一個復選框，這樣布局就不會改變：
<div>
<input
id="checkbox-one"
type="checkbox"
[(ngModel)]="checkbox1"
[disabled]="checkbox2"
/>
<label for="checkbox-one">
<span>Checkbox1.</span>
</label>
<br />
<input
id="checkbox-two"
type="checkbox"
[(ngModel)]="checkbox2"
[disabled]="checkbox1"
/>
<label for="checkbox-two">
<span>Checkbox2.</span>
</label>
</div>
https://stackblitz.com/edit/angular-ivy-tp84hu?file=src/app/app.component.html
uj5u.com熱心網友回復：
你有一個獨特的價值，所以使用一個獨特的變數。然后你可以使用 [ngModel] 和 (ngModelChange) 來改變變數的值
<input type="checkbox" [ngModel]="variable==1" (ngModelChange)="variable=$event?1:0">
<input type="checkbox" [ngModel]="variable==2" (ngModelChange)="variable=$event?2:0">
看看 one-binding 是如何作業的：第一個復選框僅在變數等于 1 時為真，第二個復選框僅在變數等于 2 時為真。
(ngModelChange)(發生變化時發生)，變數的值為1 (o 2) si "$event" 為真，否則變數取值為0
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439284.html