当以编程方式将新值推送到数组时,数组的Angular5输入字段不会显示ngModel的任何旧值。这是因为Angular的变更检测机制是基于对象引用的,而不是基于对象内容的。当你将新值推送到数组时,数组的引用没有改变,因此Angular不会检测到变化并更新视图。
解决这个问题的一种方法是使用不可变对象。你可以使用Angular提供的不可变操作符(如map()
、filter()
、concat()
等)来创建一个新的数组,而不是直接修改原始数组。这样做会创建一个新的数组引用,Angular会检测到变化并更新视图。
另一种解决方法是手动调用ChangeDetectorRef
的markForCheck()
方法来告诉Angular检测变化。在将新值推送到数组后,你可以调用markForCheck()
方法来通知Angular重新检查组件及其子组件的变化。
以下是一个示例代码:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<input [(ngModel)]="arrayValue" />
<button (click)="pushValue()">Push Value</button>
`
})
export class ExampleComponent {
arrayValue: any[] = [];
constructor(private cdr: ChangeDetectorRef) {}
pushValue() {
this.arrayValue.push('New Value');
this.cdr.markForCheck();
}
}
在上面的示例中,当点击"Push Value"按钮时,会将新值推送到arrayValue
数组,并调用markForCheck()
方法告诉Angular检测变化。
对于推荐的腾讯云相关产品和产品介绍链接地址,由于不能提及具体品牌商,建议您参考腾讯云的官方文档和产品页面,以了解他们在云计算领域的相关产品和解决方案。
领取专属 10元无门槛券
手把手带您无忧上云