首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Model [Angular]的嵌套对象填充select下拉列表

使用Model [Angular]的嵌套对象填充select下拉列表
EN

Stack Overflow用户
提问于 2019-01-04 02:45:11
回答 1查看 2.3K关注 0票数 2

我有一个select下拉列表,它需要预先填充对象数组。但是,ngModel并不绑定数据。我试着用更简单的方式演示它,但实际上,我有一个主页,当我从主页导航到联系人页面时,我需要填充表单数据。如果我直接进入联系人页面,表单必须为空。

在下面的示例中,为了简单起见,我在页面加载时填充数据,但我面临的问题类似于我之前的示例,select的ngModel没有使用来自JSON的数据进行更新。

组件:

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
adViewList: AdViewModel = new AdViewModel();
callListType = [
   {
  callType: {
    'id': 1,
    'description': 'description1',
   }
},
{
  callType: {
    'id': 2,
    'description': 'description2',
  },
}

]
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.callType.description ===    idSecond;
}
prepopulateData = {
inciNum: "12365",
callType: {
    'id': 2,
  'description': 'description2',      
  }
}

ngOnInit() { // on page load
const someDate:any = this.prepopulateData;
this.adViewList = someDate
}
}
export class AdViewModel {
inciNum: string;
callType = Availability;
}

export class Availability {
id: string;
description: string;
}

HTML:

<input type="text" id="inputcomplaint" aria-describedby="complaintHelp" 
autocomplete="new-password" name="complaint" 
[(ngModel)]="adViewList.inciNum" #complaint="ngModel">

<select [(ngModel)]="adViewList.callType.description"
              [compareWith]="compareByOptionId">
              <option style="display:none"></option>
              <option *ngFor="let data of callListType" [ngValue]="data">
                {{data.callType.description}} </option>
</select>

Demo

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-04 03:38:54

我测试了以下内容,它似乎起作用了。请注意变化。我映射的是[(ngModel)]="adViewList.callType"而不是[(ngModel)]="adViewList",因为callListTypecallType而不是AdViewModel的列表

另请注意,我正在打印<p> List: {{adViewList | json}} </p>以检查模型是否正在更新,并且它似乎正在从所选内容中获取值。

更新:要让默认值按照您拥有的onNgInit()显示,您需要将ngValue更改为[ngValue]="data.callType",并且compare函数需要检查ids,而不是对象。请参阅下面的代码。

试试这个:在你的模板中:

<select name="select" [(ngModel)]="adViewList.callType"
                  [compareWith]="compareByOptionId">
                  <option style="display:none"></option>
                  <option *ngFor="let data of callListType" [ngValue]="data.callType">
                    {{data.callType.description}} </option>
</select>

在组件中:

  compareByOptionId(idFist, idSecond) {
    return idFist.id === idSecond.id
  }

PS:对不起,我没有stackblitz id来分享我测试的东西,我只是编辑了你的文件来测试。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54028056

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档