时间戳

首页 > 解决方案 > 最初加载现有选项失败

angular - 最初加载现有选项失败

问题描述

最初加载（现有的iu.unit）失败：

 <select id="unit" name="unit" #unit="ngModel" class="form-control" 
     [(ngModel)]="iu.unit" (change)="onDropdownChangeUnit(rec,iu)">
     <option *ngFor="let i of UI_Units" [ngValue]="i">{{i.name}}</option>
 </select>

它向我显示 allunit来自UI_Units，但不显示 的初始值iu.unit。

我做错了什么？

更新

结构，我使用foreachover all ingridientUnit => iu，尝试为其分配初始值。

但是当用户想要改变它时UI_Units => coming from backend(asp.net Core)——它应该被重新分配给iu.unit.

export class Recipe{

    id: string;

    ingridientUnit: IngridientUnit[] // iu

    // ...
}


export class IngridientUnit {

    id: string;

    unit: Unit[]

    // ...
}

export class Unit {

    id: string;
    name: string;

    // ...
}

从服务器获取：

 getUnits(filter: ServerRequest) {
    return this._http.get(this.myAppUrl + 'Unit/GetUnits' + '?' + this.toQueryString(filter))
        .pipe(map((res: Unit[]) => { return res; }));
}

标签： angulartypescriptangular-forms

解决方案

首先，在下拉列表中select只显示它的孩子option。

因此，iu.unit必须在，UI_Units否则默认情况下不会选择任何内容，并且选项iu.unit不会出现在列表中。

我们可以检查Angular Forms 的代码，我想引导您关注第 134writeValue行和第 178 行_getOptionId，

writeValue(value: any): void {
  this.value = value;
  const id: string|null = this._getOptionId(value);
  // excerpt only
}

_getOptionId(value: any): string|null {
  for (const id of Array.from(this._optionMap.keys())) {
    if (this._compareWith(this._optionMap.get(id), value)) return id;
  }
  return null;
}

writeValue当一个值被传递给带有 的元素时被调用ngModel，然后在包含所有子选项的映射中查找该值。如果找不到代表值的选项（在您的情况下iu.unit），则不会发生任何有意义的事情。

最重要的是，该选项默认情况下不会出现在 select 元素下，只有当它明确包含在模板中时才会出现。

我已经创建了一个工作示例来说明您要完成的工作，请注意这iu.unit是数组中的一个元素UI_Units。这就是它的比较算法的工作原理。

推荐阅读