Question

我对Angular 2、3、4和5并不熟悉，我试图更好地了解Angular 6。

问题：我将一个用户对象推送到users数组，然后当我更改输入值时，数组中的所有对象也都在更改。

component.ts

public data; //user input id,age,first_name,last_name
public users: User[] = [];

constructor() {
    this.data = {};
}

ngOnInit() {
}

btnClick = function () {
    //push the user input to array
    this.users.push(this.data);
};

请在此处检查我的示例代码：https://stackblitz.com/edit/angular-1ztg1k

Answer 1

在将apply plugin: 'realm-android' apply plugin: 'com.android.application' android { compileSdkVersion 27 defaultConfig { applicationId "com.version.crt.myapplication" minSdkVersion 22 targetSdkVersion 27 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support.constraint:constraint-layout:1.1.3' implementation 'com.android.support:design:27.1.1' implementation 'com.android.support:recyclerview-v7:27.1.1' implementation 'com.android.support:design:27.1.1' implementation 'com.android.support:cardview-v7:27.1.1' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' }对象推入数组后，您将被绑定到相同的data引用。在数组中添加项目之后，文本输入仍然引用数组中data之前的data引用。

您要做的就是将[(ngModel)]="data.first_name"实例重新初始化为一个空的对象常量。

data

我分叉了您的代码并对其进行了修改： https://stackblitz.com/edit/angular-klrrjd

更改输入值时，Angular 6 ngFor值将更新

1 个答案: