我保存在 localstorage selectedKitchenId 中，并選中或 selectedKitchenId === kitchen.id，如果為 true 則選擇收音機。不明白為什么不作業檢查條件，我嘗試強標簽顯示相同的檢查一切正常。告訴我可能是什么原因
<div class='row'>
<div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>
<div class="form-check form-check-inline">
<label class="form-check-label" for="{{kitchen.id}}">
<div class='kitchenTypeBg'>
<img src='{{kitchen.src}}' alt='' class='p-1 align-middle'>
</div>
</label>
<input
[checked]="selectedKitchenId === kitchen.id"
formControlName="kitchenType"
[value]='kitchen.id'
class="form-check-input" type="radio" id="{{kitchen.id}}"
>
<strong>{{selectedKitchenId === kitchen.id}}</strong>
</div>
</div>
</div>
uj5u.com熱心網友回復：
它對我有用，表單控制元件傳遞值。這里是如何完成的鏈接
// Get selected Kitchen id
this.selectedKitchenId =
this.persistenceService.get('selectedKitchenId') ?? null;
initializeForm(): void {
this.form = this.formBuilder.group({
kitchenType: new FormControl(this.selectedKitchenId, Validators.required),
});
}
uj5u.com熱心網友回復：
<form #f="ngForm" (ngSubmit)='goToNextStep(f.form)'>
<div *ngIf="submitted && f.invalid">
<span class='text-center'>Required form</span>
</div>
<div class='row'>
<div *ngFor="let kitchen of kitchenTypes" class='col-lg-3'>
<div class="form-check form-check-inline">
<label class="form-check-label" [for]="kitchen.id">
<div class='kitchenTypeBg'>
<img [src]='kitchen.src' alt=''
class='p-1 align-middle'>
</div>
</label>
<input
name="kitchenType"
[checked]="selectedKitchenId === kitchen.id"
[value]='kitchen.id'
class="form-check-input"
type="radio"
[id]="kitchen.id"
>
<strong>{{selectedKitchenId === kitchen.id}}</strong>
</div>
</div>
</div>
<div class="d-grid">
<button type="submit"
class="btn-block btn
btn-outline-light
buttonNext mx-auto mt-4 w-50">
T?sti
</button>
<button
[routerLink]="['/']"
class='btn btn-block mx-auto buttonBack'>
<i class="bi bi-arrow-left"></i>
Gri?ti
</button>
</div>
</form>模板驅動就是這么簡單
為您修復了一些最佳實踐
要獲取值，只需在 TS 檔案上使用：
goToNextStep(form) {
const {kitchenType} = form.values
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/414479.html
標籤：
上一篇：指定物件中陣列的型別（打字稿）
下一篇：角度切換按鈕未按預期作業