0

我有一个关于我的 Radiobox 组的 UI 更新的问题。

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options.value' (ngModelChange)="selectionChanged($event)" type="radio" name="dateOptions"
           [(ngModel)]="selectedOption">
    <label class="mr-3">
        {{options.displayText}}
    </label>
</div>

这种绑定工作正常。我的组件扩展了 ControlValueAccessor 并且当selectedOption更新如下:

writeValue(dateId: DateIds): void {
    const matchingOption = this.dateOptions.find((option) => equal(option.id, dateId))
    this.selectedOption= matchingOption ? matchingOption.value : this.selectedOption
    this.selectionChanged(this.selectedOption)
  }

该值设置正确,selectedOption但 UI 仅在我与组件交互时更新。即使打开我的日期选择器足以更新 UI,我也不必更改选择。

根据文档,UI 应在selectedOption更改以匹配该值时更改。

4

1 回答 1

0

好的,我在我身边检查了它。您的想法按预期工作。您的代码中一定有一些东西会干扰更新过程。

这是我的设置。10 秒后,值selectedOption会发生变化。在我的情况下,单选按钮 1 失去选择,而 3 被选中。没有任何进一步的互动。

**HTML**

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options' 
        (ngModelChange)="selectionChanged($event)" 
        type="radio" name="dateOptions"
        [(ngModel)]="selectedOption">
        <label class="mr-3">
            {{options}}
        </label>
 </div>

TS

dateOptions = ['date1', 'date2', 'date3'];
selectedOption = 'date1';


constructor() {
    setTimeout(() => {
        this.selectedOption = 'date3';
        console.log('changed');
    }, 10000);
}
于 2021-04-23T17:32:18.313 回答