angular - 插入后材料表不更新数据
问题描述
我得到一个包含材料表的组件数据和另一个包含表单组件的组件数据。首次启动应用程序时,会正确列出所有项目,但在插入后,表格不会仅在页面刷新时自动更新。从 person.service 中检索数据
我的 Form.component.ts:
import { Component, OnInit, EventEmitter, Output, ViewChild, AfterViewInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Person } from '../person/person.model';
import { MatSnackBar, MatTableDataSource } from '@angular/material';
import { PersonService } from '../person/person.service';
import { DataComponent } from '../tableData/data.component';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit, AfterViewInit {
@Output() addedPerson = new EventEmitter<any>();
@ViewChild(DataComponent, { static: false }) dataComponent: DataComponent;
newPerson: Person = new Person();
// editedPerson: Person;
nameFormControl = new FormControl('', [Validators.required]);
lastNameFormControl = new FormControl('', [Validators.required]);
emailFormControl = new FormControl('', [Validators.required, Validators.email]);
phoneFormControl = new FormControl('', [Validators.required]);
constructor(public snackbar: MatSnackBar, private personService: PersonService) { }
ngOnInit() {
}
ngAfterViewInit() { }
savePerson() {
this.personService.addPerson(this.newPerson).subscribe(response => {
this.snackbar.open('Usuario Agregado', null, { duration: 2000 });
this.clear();
this.personService.getPersonsList().subscribe(list => {
this.dataComponent.dataSource = list;
});
});
}
// CLEAR ALL INPUTS
clear() {
this.newPerson.name = '';
this.nameFormControl.clearValidators();
this.newPerson.lastName = '';
this.lastNameFormControl.clearValidators();
this.newPerson.email = '';
this.emailFormControl.clearValidators();
this.newPerson.phone = '';
this.phoneFormControl.clearValidators();
}
}
我的 data.component.ts
import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { Person } from '../person/person.model';
import { PersonService } from '../person/person.service';
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
dataSource;
// displayedColumns: string[] = ['Id', 'nombre', 'apellido', 'email', 'telefono', 'acciones'];
displayedColumns: string[] = ['nombre', 'apellido', 'email', 'telefono', 'acciones'];
@ViewChild('dataTable', { static: false }) dataTable;
// @Output() sendDataBack = new EventEmitter<{ index, name, lastName, email, phone }>();
constructor(private personService: PersonService) { }
ngOnInit() {
this.personService.getPersonsList().subscribe(
personsList => {
this.dataSource = personsList;
console.log(personsList);
});
}
editPerson(element) {
// this.sendDataBack.emit({
// index: this.dataSource.indexOf(element),
// name: element.name, lastName: element.lastName, email: element.email, phone: element.phone
// });
}
deletePerson(element) {
// this.dataSource.splice(element.index, 1);
// this.dataTable.renderRows();
}
}
我的person.service.ts
import { Injectable } from '@angular/core';
import { Person } from './person.model';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Subject } from 'rxjs';
@Injectable()
export class PersonService {
private url = 'http://localhost:8080/persons';
private httpHeaders = new HttpHeaders({ 'Content-Type': 'application/json' });
constructor(private http: HttpClient) { }
getPersonsList(): Observable<Person[]> {
return this.http.get<Person[]>(this.url);
}
addPerson(person: Person): Observable<Person> {
return this.http.post<Person>(this.url, person, { headers: this.httpHeaders });
}
}
我还在学习角度,所以我不知道我错过了什么。提前致谢
解决方案
所以我找到了一种方法,只需调用
this.dataComponent.dataTable.dataSource = this.personService.getPersonsList();
在向 app.component 发出事件发射器之后。
推荐阅读
- c++ - 在 C++ 中手动调整数组大小
- html - 如何在高度为零的div边框内写入
- javascript - youtube 嵌入视频自动播放不适用于谷歌浏览器中未静音的声音,但它适用于 Firefox
- makefile - SDL + 花栗鼠 CMake 配置
- java - 即使在Java中初始化子类后,静态变量的值也不会改变
- c# - XMLSCHemaSet.Add 在 Visual Studio 2017 中失败
- excel - 如何在不打开 Visual Basic 编辑器的情况下执行 VBA 代码
- angular - 使用选定的下拉菜单提交表单数据
- r - 根据作为另一个数据帧的行给出的条件有效地过滤数据帧
- android - 半透明活动中的退出过渡