初始加载现有选项失败 [英] Initially loading of an existing option fails
问题描述
初始加载(现有iu.unit)失败:
它向我显示了 UI_Units 中的所有 unit，但它没有显示 iu.unit 的初始值.
我做错了什么?
更新
结构，我在所有 ingridientUnit => 上使用 ，尝试用它的初始值赋值.foreachiu
但是当用户想要改变它时 - UI_Units =>来自后端(asp.net Core) - 它应该重新分配给 iu.unit.
导出类配方{id:字符串；ingridientUnit: IngridientUnit[]//iu//...}导出类 IngridientUnit {id:字符串；单位:单位[]//...}出口类单位{id:字符串；名称:字符串；//...}从服务器获取:
getUnits(filter: ServerRequest) {返回 this._http.get(this.myAppUrl + 'Unit/GetUnits' + '?' + this.toQueryString(filter)).pipe(map((res: Unit[]) => { return res; }));}首先，select 只在下拉列表中显示它的子options.
基于这个原因，iu.unit 必须在 UI_Units 中，否则默认什么都不选，iu.unit 的选项将未出现在列表中.
我们可以查看Angular Forms'代码，我想引导您关注第 134 行 writeValue 和第 178 行 _getOptionId，
writeValue(value: any): void {this.value = 值；const id: string|null = this._getOptionId(value);//仅摘录}_getOptionId(value: any): string|null {for (Array.from(this._optionMap.keys()) 的常量 id) {if (this._compareWith(this._optionMap.get(id), value)) 返回 id;}返回空；}writeValue 在使用 ngModel 将值传递到元素时被调用，然后在包含所有子选项的映射中查找该值.如果未找到表示值的选项(在您的情况下为 iu.unit)，则不会发生任何有意义的事情.
最重要的是，默认情况下，该选项不会出现在 select 元素下，只有当它明确包含在您的模板中时才会出现.
我创建了一个工作示例 您要完成的任务，请注意 iu.unit 是数组 UI_Units 中的一个元素.这就是 其比较算法的工作原理.
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>
It shows me all unit's from UI_Units, but it doesn't show the initial value of iu.unit.
What did I d wrong ?
Updated
Structure, I go with a foreach over all ingridientUnit => iu, try to assign it with it's initial value.
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;
// ...
}
Fetching from server:
getUnits(filter: ServerRequest) {
return this._http.get(this.myAppUrl + 'Unit/GetUnits' + '?' + this.toQueryString(filter))
.pipe(map((res: Unit[]) => { return res; }));
}
First of all, select only shows its children options in the dropdown.
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.
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;
}
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.
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.
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屋！
