最初加载现有选项失败 [英] Initially loading of an existing option fails

问题描述

(现有iu.unit的)初始加载失败:

The initially loading (of an existing iu.unit) fails:

 <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>

它显示了UI_Units中的所有unit，但没有显示iu.unit的初始值.

It shows me all unit's from UI_Units, but it doesn't show the initial value of iu.unit.

我错了什么?

已更新

结构，我在所有ingridientUnit => iu上都使用了foreach，尝试为其分配初始值.

Structure, I go with a foreach over all ingridientUnit => iu, try to assign it with it's initial value.

但是当用户想要更改-UI_Units => coming from backend(asp.net Core)-应该将其重新分配给iu.unit.

But when the user wants to change that - UI_Units => coming from backend(asp.net Core) - it should be reassigned to 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; }));
}

推荐答案

首先，select仅在下拉列表中显示其子元素option.

First of all, select only shows its children options in the dropdown.

由于这个原因，iu.unit必须位于UI_Units中，否则默认情况下将不选择任何内容，并且iu.unit选项不会出现在列表中.

Following that reason, iu.unit must be in UI_Units or nothing will be selected by default and the option of iu.unit will not appear in the list.

我们可以检查角度形式'代码，我想将您的注意力集中在第134 writeValue行和第178 _getOptionId行，

We can check Angular Forms' code on this, I'd like to direct you focus to line 134 writeValue and line 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;
}

当使用ngModel将值传递到元素中时，将调用

writeValue，然后在包含所有子选项的映射中查找该值.如果找不到代表该值的选项(在您的情况下为iu.unit)，则不会发生任何有意义的事情.

writeValue is called when a value is passed into the element with ngModel, the value is then looked up in a map containing all the child options. If an option representing the value (in your case iu.unit) isn't found, nothing meaningful will happen.

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

Most importantly, the option would not appear by default under the select element, it will appear only when it's explicitly included in your template.

我已经创建了一个有效的示例您要完成的工作，请注意iu.unit是数组UI_Units中的元素.这就是其比较算法的工作方式.

I've created a working example of what you're trying to accomplish, note that iu.unit is an element in the array UI_Units. That's how its comparison algorithm work.

这篇关于最初加载现有选项失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！