打字稿：如何在对象更改时更新选择

Posted 2023-03-13

【中文标题】打字稿：如何在对象更改时更新选择

【英文标题】：Typescript: How to update select when object has changed

【发布时间】：2019-01-13 10:32:55

【问题描述】：

我有这个 html 代码：

<tr>
    <td><label>G Level 3</label></td>
    <td><select [ngModel]="selectedG3" (ngModelChange)="selectG3Changed($event)">
          <option></option>
          <option *ngFor="let g3 of gLevels3" [ngValue]="g3">g3.name</option>
        </select>
    </td>
</tr>

这是我的 ts 代码：

gLevels3: GLevel[];
getGLevels3(): void 
   this.httpServerService.getGLevels(3).subscribe(glevel3 => this.gLevels3 = glevel3);

gLevels3 是一个带有 Objects 的 Array。每次调用函数 getGLevels3() 时，我都想更新 select 的 options。

目前它不工作。调用该函数后，select中仍然有相同的options。

如何触发更新？

【问题讨论】：

你看过***.com/questions/33181936/…吗？

@GetFuzzy 不，但谢谢。我想让你更容易理解。实际上它适用于我刚刚知道的选择，但不适用于具有动态表格行的表格

动态表行听起来你可能有不同的绑定问题。可能值得提出一个新问题。

@GetFuzzy 我明白了。还是谢谢你！

@GetFuzzy 我的问题在这里是这样的：github.com/angular/angular/issues/15511 但并不是我收到错误。它只是没有更新表格。

【参考方案1】：

我不确定您是否已经消除了所有其他可能性...您的代码看起来是正确的。在我工作的代码库中，我们遇到了相同类型的情况。我们有一个过滤选择选项情况，它正在更新。

        <select class="tool-controls__select" style="margin-right: 4px;" *ngIf="selectFilterOptions.length > 0 && chartIdsDefined" [(ngModel)]="selectedFilterOption" (change)="selectFilterOptionOnChange()">
            <option [ngValue]="filterItem" *ngFor="let filterItem of selectFilterOptions">filterItem</option>
        </select>
        <select class="tool-controls__select" [(ngModel)]="selectedOption" (change)="selectOnChange()">
            <option [ngValue]="item" *ngFor="let item of selectOptions">item.name</option>
        </select>