为了保存,我成功地获得了一个与模型绑定的 Select 列表,但如果我提供编辑功能,我无法确定如何让Angular2自动在 Select 列表上 Select 正确的选项.换句话说,如果我通过表单编辑一个预先存在的对象,我需要 Select 列表来反映对象的初始状态(例如 Select 列表中的选项5),而不是默认为第一项.

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

我觉得它应该是怎么工作的,但事实并非如此!

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

所以本质上,我试图利用选项上的"selected"属性,但无论出于什么原因,它都没有任何作用.本例中的"selectedObject"是组件中可以读取的对象.

推荐答案

好吧,所以我找到了问题所在,我认为这种方法最有效.在我的例子中,因为从Javascript的Angular 来看,这两个对象并不完全相同,比如:它们可能共享相同的值,但它们是不同的实际对象,例如,originalObjectobjects完全分开实例化,后者本质上是一个参考数据数组(用于填充下拉列表).

我发现最适合我的方法是比较对象的独特属性,而不是直接比较两个完整对象.这种比较是在绑定属性selected中进行的:

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option>
</select>

Angular相关问答推荐

当项目具有BrowserAnimationsModule时,Angular UI未拾取数据模型更改

独立组件;依赖项注入

Angular 16:CSRF配置:我仍然可以使用HttpXsrfInterceptor和HttpXsrfCookieExtractor类吗?Inteli-J说他们不存在

在RxJS和ANGING中处理多个API调用

AOS中的数据绑定--可能吗?

有角.服务.模块构建失败.无法读取未定义的属性(读取文件)

Angular AuthGuard:不推荐使用 CanActivate 和 CanActivateChild.如何更换它们?

MatTooltip 显示在 html 原生对话框下方

如何处理Angular 延迟订阅

无法将项目从 Angular 13 更新到 14

Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

Angular 2 中的 ChangeDetectionStrategy.OnPush 和 Observable.subscribe

导航到同一条route路由不刷新组件?

Angular 2:formGroup 需要一个 FormGroup 实例

如何使用 CLI 创建特定版本的 Angular 项目?

错误:angular2 中没有 HttpHandler 的提供者

在 Angular 2 中使用逗号作为列表分隔符

ng add 与 npm install 在 Angular 6 中的区别

ng build 时超出调用重试次数异常

如何在 Angular 2 中设置 Bootstrap 导航栏 active类?