下拉菜单无法从对象中提取数值（Angular 4）

Posted 2023-03-13

【中文标题】下拉菜单无法从对象中提取数值（Angular 4）

【英文标题】：Dropdown can't pull number value from object (Angular 4)

【发布时间】：2018-02-23 19:18:39

【问题描述】：

我正在从 API 中提取数据，除非我将我的 JSON 选项编号值绑定到 [value] 标记中，否则一切正常。见例子：

WORKING（从 API 获取的数据在选项中被选中）

<select [(ngModel)]="data.from.api.one" class="form-control">
<option *ngFor="let c of subdimension" [value]="c.name"> c.name </option>
</select> <!-- select with c.name on value -->

NOT WORKING（未选择数据且第一个选项为空）

<select [(ngModel)]="data.from.api.one" class="form-control">
<option *ngFor="let c of subdimension" [value]="c.value"> c.name </option>
</select> <!-- select with c.value on value -->

JSON 对象：

subdimension = ['name': 'sub1','value': 2  ,
  'name': 'sub2','value': 4 ,
  'name': 'sub3','value': 8]

我想要做的是将一个数字值绑定到一些选择中，然后将它们全部相加：

data.from.api.one + data.from.api.two...

编辑：

data.from.api 中的组件代码

constructor (public dataService:DataService)
    this.dataService.getData().subscribe(datas => 
      this.datas = datas;
    );
  

getData()
return this.http.get('https://api.url/').map(res => res.json());
              

datas:Data[];

data = 
  from:api:one:'',two:'',three:''

【问题讨论】：

您是否有可能将默认值设置为 data.form.api.one 如果是这样，请发布一些设置它的组件。

@Sonicd300 已编辑代码

非常相似的问题，但 AngularJS：***.com/questions/28114970/… ... 问题是“选择”选项必须是字符串，但您尝试直接使用数字值。如果您解析到/从字符串解析，也许会修复？

@mc01 刚刚意识到这不仅仅是数字，我在 json 对象上添加了一个新的字符串属性，但仍然是同样的问题。仅当我将 c.name 放在 [value] 上时它才有效（它与从 API 调用的字符串相等）。问题是，如何将它绑定到与 c.name 不同的另一个值？

【参考方案1】：

一切正常。我创建了plunker。您需要在请求后设置 ngModel 值。

<select [(ngModel)]="data.from.api.one" class="form-control">
 <option *ngFor="let c of subdimension; let i = index" [ngValue]="c"> 
   c.name </option>
 </select>

如果你想要纯数字

<select [(ngModel)]="data.from.api.one" class="form-control">
 <option *ngFor="let c of subdimension; let i = index" [value]="c.value"> 
   c.name </option>
 </select>

在您的代码中，在 ngOnInit 挂钩中使用此代码

return this.http.get('https://api.url/').map(res => res.json()).do((d) => 

     this.subdimension = d;
        //if you use object
        this.data.from.api.one = d[0]
        //if you use value
        this.data.from.api.one1 = d[0].value
     )

或

 this.dataService.getData().subscribe(datas => 
  this.datas = datas;
   this.data.from.api.one = datas[0]
        //if you use value
        this.data.from.api.one1 = datas[0].value
);

【讨论】：

好的 :-) 只是礼貌

@alexKhymenko 这不是问题。问题是当从 API 获取数据并将其与数值绑定时，根本不会提取数据（例如imgur.com/a/BMYr6）。第一个是 c.name，第二个是 [value] 标签上的 c.value。我不确定为什么当我把它作为 c.value 时会发生这种情况。

你的意思是默认值？？导致其在模型中设置 c.value。

在对象和值上添加了 2 个示例。祝你好运！！

抱歉，我没能成功。我已经用我的 api-get 组件代码更新了这篇文章。也许这可以让您更好地了解我的问题。