我有一个带有一些输入字段的表单
当我提交表单时，我想在表dataSource中添加一行新数据。
我有一个看起来像这样的表单组件：
表单HTML
<form (submit)="submitForm($event)">
<app-form-element align="center" *ngFor="let el of fields| keyobject" [value]="el.value.value" [type]="el.value.type">
</app-form-element>
<button>Save User</button>
</form>
表格TS
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
fields!: object;
constructor() { }
ngOnInit(): void {
this.newForm();
}
newForm() {
this.fields = [{ value: "Name", type: "text" },
{ value: "Surname", type: "text" },
{ value: "Email", type: "email" }];
}
tbc = new TableComponent;
submitForm(event: any) {
let newUser = new User();
newUser.name = event.target.Name.value;
newUser.surname = event.target.Surname.value;
newUser.email = event.target.Email.value;
this.tbc.addValue(newUser);
event.preventDefault();
}
}
export class User {
name!: string;
surname!: string;
email!: string;
}
表格HTML
<table *ngIf="show">
<tr>
<th *ngFor="let column of headers">
{{column}}
</th>
<th>Commands</th>
</tr>
<tr *ngFor="let row of dataSource | keyobject; let i = index">
<td *ngFor="let col of headers">
{{row.value[col]}}
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteValue(i)">Delete</button>
</tr>
</table>
表TS
export class TableComponent implements OnInit {
headers = ['name', 'surname', 'email'];
dataSource: any = [
{ id: 1, name: "test", surname: 'test', email: "test@gmail.com"},
];
ngOnInit(): void {
}
addValue(user: User) {
let id = this.dataSource.length + 1;
this.dataSource = [...this.dataSource, { id: id, name: user.name, surname: user.surname, email: user.email, save: false }];
this.reload();
}
deleteValue(id: any) {
this.dataSource.splice(id, 1);
this.reload();
}
public show = true;
reload() {
this.show = false;
setTimeout(() => this.show = true);
}
}
当我调用Form.ts中的addValue函数时，它可以工作，但dataSource没有得到更新
调试代码一切正常，看起来记录被添加到dataSource中，但表dataSource实际上没有新记录，因此不会显示。
请注意，我的deleteValue工作正常，正在从dable和dataSource 中删除行
我是angular的新手，所以任何帮助都很感激
我认为问题是您的子组件对dataSource数组的更改不会在推送时自动检测到。您可以使用ChangeDetectorRef:中的detectChanges强制进行更改检测
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableComponent implements OnInit {
contructor(
private cdr: ChangeDetectorRef
) {}
dataSource: any = [
{ id: 1, name: "test", surname: 'test', email: "test@gmail.com"},
];
addValue(user: User) {
let id = this.dataSource.length + 1;
this.dataSource.push({ id: id, name: user.name, surname: user.surname, email: user.email});
this.reload();
}
public show = true;
reload() {
// here you can force the change detection
this.cdr.detectChanges();
...
}
}
尽管changeDetector的其他解决方案可能会起作用，但它并不是通知angular刷新的最佳方法。相反，最好只是以一种角度会注意到需要更改的方式来放置代码
我相信，在有角度的情况下，推入阵列，并没有被检测到是一个新的变化。
我认为你可以做以下事情，而不是推送：
this.dataSource = [...this.dataSource, { id: id, name: user.name, surname: user.surname, email: user.email}]
基本上，您将创建一个包含旧数组+新数据的新数组。
无论如何，为了确保这是一个正确的答案，你能提供TS和HTML模板的实际代码吗