我通过服务推送到数组，但它在Angular中不可见

Question

我试图将数据从一个组件中的响应式表单推送到服务中，然后在mat-table中输出，问题是它工作，当我cl('array'，'data')一切看起来都很好，但从网站上看不出来。

ts.
onSubmit() {
const singleJob: Job = {
name: this.signupForm.controls['jobsName'].value,
points: this.signupForm.controls['jobPoints'].value,
};
this.dataService.pushToJobs(singleJob);
}
addUser() {
const singleUser: User = {
name: this.signupForm.controls['userName'].value,
};
this.dataService.addUser(singleUser);
}
service.ts
export class DataService {
jobs: Job[] = [
{ name: 'sprzatanie', points: 10 },
{ name: 'gotowanie', points: 20 },
{ name: 'mycie okien', points: 30 },
{ name: 'wyniesc smieci', points: 10 },
{ name: 'zmywanie', points: 50 },
];
userJobs: Job[] = [{ name: 'test1', points: 7 }];
users: User[] = [{ name: 'Karol' }];
constructor(private logic: LogicService) {}
pushToJobs(userjob: Job) {
this.jobs.push(userjob);
console.log(userjob, this.jobs);
}
pushToUserJobs() {}
addUser(user: User) {
this.users.push(user);
console.log(user, this.users);
}
}

Answer 1

我假设您的垫子表像这样使用数据

<mat-table [dataSource]="userJobs>...</mat-table>

组件

export class YourComponent {
constructor(
private readonly _dataService: DataService,
) {
this.userJobs = this._dataService.userJobs;
}
}

对于这段代码，问题是mat-table通过引用存储(和更新)数组。由于您只是将数据添加到数组中，因此此引用不会更改(即使其存储的值可能会更改)。因此，在向现有数组中添加元素时，只需创建一个新数组，如下所示:

private _userJobs = [];
userJobs$ = BehaviorSubject(this._userJobs);
pushToUserJobs(userjob: UserJob) {
this._userJobs = [...this.userJobs, userjob];
userJobs$.next(this._userJobs);
}

和

<mat-table [dataSource]="userJobs$ | async>...</mat-table>

这是一个关于Stackblitz的概念证明:https://stackblitz.com/edit/angular-tnb33i