Angular - Material Table，是否可以在没有整个表刷新的情况下更新行？
经过几周的谷歌搜索，到目前为止只有一个Stackoverflown问题，我终于设法使用材料表组件构建了我的 Angular CRUD App 。它显示来自后端（JSON）的数据和CRUD操作我使用的对话框如图所示（这是编辑，对克罗地亚人抱歉）。对话可能不是最好的方法，内联编辑可能会更好。但是，对于添加新项目，您还需要像对话框这样的内容。
我最不愿意的是如何相应地更新表中的字段。因此，当您在对话框中按“保存”时，数据会在后端（在MySQL表中）更新，但不会在前端更新。目前我有一个丑陋的解决方法，每当你进行更新时，它也刷新整个表。
无论如何这里的代码：
表组件：
export class BazaComponent implements OnInit {
....
constructor(public httpClient: HttpClient, public dialog: MatDialog) {
}
ngOnInit() {
this.loadData();
}
// TODO: Simplfy this...
addNew(ident: number, naziv: string, mt: number, kutija: number,
komada: number, jm: string, orginal: number, lokacija: number, napomena: string) {
console.log('add new clicked');
const dialogRef = this.dialog.open(AddDialogComponent, {
data: {ident: ident, naziv: naziv, mt: mt, kutija: kutija,
komada: komada, jm: jm, orginal: orginal, lokacija: lokacija, napomena: napomena }
});
dialogRef.afterClosed().subscribe(result => {
console.log(result);
if (result === 1) {
this.loadData(); // --> This is a temp workaround, every time when I do CRUD operation just redraw whole thing again
}
});
}
startEdit(id: number, ident: number, naziv: string, mt: number, kutija: number,
komada: number, jm: string, orginal: number, lokacija: number, napomena: string) {
const dialogRef = this.dialog.open(EditDialogComponent, {
data: {id: id, ident: ident, naziv: naziv, mt: mt, kutija: kutija,
komada: komada, jm: jm, orginal: orginal, lokacija: lokacija, napomena: napomena}
});
dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
this.loadData(); // --> This is a temp workaround, every time when I do CRUD operation just redraw whole thing again
}
});
}
deleteItem(id: number, ident: number, naziv: string, mt: number) {
const dialogRef = this.dialog.open(DeleteDialogComponent, {
data: {id: id, ident: ident, naziv: naziv, mt: mt}
});
dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
this.loadData();
}
});
}
public loadData() {
this.exampleDatabase = new DataService(this.httpClient);
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if (!this.dataSource) {
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
}
}
export class ExampleDataSource extends DataSource<Baza> {
_filterChange = new BehaviorSubject('');
get filter(): string {
return this._filterChange.value;
}
set filter(filter: string) {
this._filterChange.next(filter);
}
filteredData: Baza[] = [];
renderedData: Baza[] = [];
constructor(private _exampleDatabase: DataService,
private _paginator: MatPaginator,
private _sort: MatSort) {
super();
// Reset to the first page when the user changes the filter.
this._filterChange.subscribe(() => this._paginator.pageIndex = 0);
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<Baza[]> {
// Listen for any changes in the base data, sorting, filtering, or pagination
const displayDataChanges = [
this._exampleDatabase.dataChange,
this._sort.sortChange,
this._filterChange,
this._paginator.page,
];
this._exampleDatabase.getAllItems();
return Observable.merge(...displayDataChanges).map(() => {
// Filter data
this.filteredData = this._exampleDatabase.data.slice().filter((item: Baza) => {
const searchStr = (item.ident + item.naziv + item.mt + item.lokacija + item.napomena).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
});
// Sort filtered data
const sortedData = this.sortData(this.filteredData.slice());
// Grab the page's slice of the filtered sorted data.
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize);
return this.renderedData;
});
}
disconnect() {
}
/** Returns a sorted copy of the database data. */
sortData(data: Baza[]): Baza[] {
... sort stuff
}
这是DataService，我想我应该进行现场更新：
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
import { Baza } from '../models/kanban.baza';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {
private readonly API_URL = 'http://localhost/api/'
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<Baza[]> = new BehaviorSubject<Baza[]>([]);
constructor(private httpClient: HttpClient) {
}
get data(): Baza[] {
return this.dataChange.value;
}
getAllItems(): void {
this.httpClient.get<Baza[]>(this.API_URL).subscribe(data => {
this.dataChange.next(data['items']);
});
}
addItem(baza: Baza): void {
this.httpClient.post(this.API_URL, Baza).subscribe(data => {
//THIS WAS MY BEST TRY BUT IT DOESN'T WORK :(
const copiedData = this.data.slice();
copiedData.push(baza);
console.log(copiedData);
this.dataChange.next(copiedData);
});
}
updateItem(baza: Baza): void {
this.httpClient.put(this.API_URL + baza.id, baza).subscribe();
}
deleteItem(id: number): void {
this.httpClient.delete(this.API_URL + id, {headers: new HttpHeaders().set('Access-Control-Allow-Origin', '*')} ).subscribe();
}
}
更新27.11.2017：
好的，我终于想出了如何触发新的行添加。我不得不在表组件中调用dataChange.value。一旦你用一些数据加载它，新的行将立即出现。
const data = {id: 208, ident: 233, naziv: 'test', mt: 291, komada: 2, jm: 'a', orginal: 100, lokacija: 3, napomena: 'pls work'};
this.exampleDatabase.dataChange.value.push(data);
DataService中的相同内容不起作用：
this.dataChange.value.push(data);
Plunker在这里：
https://plnkr.co/edit/IWCVsBRl54F7ylGNIJJ3?p=info
编辑28.11.2017：
现在唯一剩下的就是为添加，编辑和删除构建逻辑。对于添加很容易，它只是`value.push（data）'。感谢大家的帮助。
10 个答案:
答案 0 :(得分：18)
花了我一些时间，但我终于把一切都搞定了。您的答案和不同的方法也有帮助。所以，如果有人遇到麻烦，这是我的CRUD实现：
https://github.com/marinantonio/angular-mat-table-crud
截图：
或者您可以查看项目演示： https://marinantonio.github.io/angular-mat-table-crud/
关键部分在table.ts文件中：
....
addNew(issue: Issue) {
const dialogRef = this.dialog.open(AddDialogComponent, {
data: {issue: issue }
});
dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
this.exampleDatabase.dataChange.value.push(this.dataService.getDialogData());
this.refreshTable();
}
});
}
startEdit(i: number, id: number, title: string, state: string, url: string, created_at: string, updated_at: string) {
this.index = i;
this.id2 = id;
console.log(this.index);
const dialogRef = this.dialog.open(EditDialogComponent, {
data: {id: id, title: title, state: state, url: url, created_at: created_at, updated_at: updated_at}
});
dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
// Part where we do frontend update, first you need to find record using id
const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id2);
// Then you update that record using dialogData
this.exampleDatabase.dataChange.value[foundIndex] = this.dataService.getDialogData();
// And lastly refresh table
this.refreshTable();
}
});
}
deleteItem(i: number, id: number, title: string, state: string, url: string) {
this.index = i;
this.id2 = id;
const dialogRef = this.dialog.open(DeleteDialogComponent, {
data: {id: id, title: title, state: state, url: url}
});
dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
const foundIndex = this.exampleDatabase.dataChange.value.findIndex(x => x.id === this.id2);
this.exampleDatabase.dataChange.value.splice(foundIndex, 1);
this.refreshTable();
}
});
}
private refreshTable() {
// If there's no data in filter we do update using pagination, next page or previous page
if (this.dataSource._filterChange.getValue() === '') {
if (this.dataSource._paginator.pageIndex === 0) {
this.dataSource._paginator.nextPage();
this.dataSource._paginator.previousPage();
} else {
this.dataSource._paginator.previousPage();
this.dataSource._paginator.nextPage();
}
// If there's something in filter, we reset it to 0 and then put back old value
} else {
this.dataSource.filter = '';
this.dataSource.filter = this.filter.nativeElement.value;
}
}
....
答案 1 :(得分：6)
我从你的代码中看到你正在使用分页，你可以在crud操作后执行以下操作：
this.dataSource.paginator = this.paginator;
这将刷新当前页面。并且，很高兴来自克罗地亚的人正在使用棱角分明的材料。
这是我的代码中的重要部分：
dialogRef.afterClosed().subscribe(result => {
if (result === null) { return; }
switch (mode) { // add new
case 'C': {
data.push(result.vendor);
this.refreshTable();
break;
}
case 'U': { // update
const index = data.findIndex((item) => item.buFmisVendorId === result.vendor.buFmisVendorId);
if (index > -1) {
data[index] = vendor;
this.refreshTable();
}
break;
}
}
});
private refreshTable() {
this.dataSource.paginator = this.paginator;
}
答案 2 :(得分：3)
删除项目和刷新数据表的一种不同方法。它再次调用api，但这可能适用于较小的数据集。
public deleteMember(memberId) {
// Call the confirm dialog component
this.confirmService.confirm('Confirm Delete', 'This action is final. Gone forever!')
.switchMap(res => {if (res === true) {
return this.appService.deleteItem(this.dbTable, memberId);
}})
.subscribe(
result => {
this.success();
// Refresh DataTable to remove row. This solution calls the db and is a hack.
this.ngAfterViewInit();
},
(err: HttpErrorResponse) => {
console.log(err.error);
console.log(err.message);
this.messagesService.openDialog('Error', 'Delete did not happen.');
}
);
}
当然，这会在组件的顶部附近调用，但在此处包含以供参考。
private dbTable = 'members';
dataSource = new MatTableDataSource();
ngAfterViewInit() {
this.appService = new AppService(this.http);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
// Populate the Material2 DataTable.
Observable.merge(this.paginator.page)
.startWith(null) // Delete this and no data is downloaded.
.switchMap(() => {
return this.appService.getItems( this.dbTable,
this.paginator.pageIndex);
})
.map(data => {
return data.resource;
})
.subscribe(data => {
this.dataLength = data.length;
this.dataSource.data = data;
});
}
答案 3 :(得分：3)
此解决方案使用我现有的删除代码，但更新代码相同。关键问题是找到编辑或删除的项目的数组索引。请注意，一旦结果成功，我调用一个成功模式来通知用户然后调用一个函数来从数据表中删除该行。或者，您可以使用一些不同的代码更新该行中的数据，例如将数据推送到对象数组中。这样我们就不必再次下载所有数据了。
public deleteMember(memberId) {
// Call the confirm dialog component
this.confirmService.confirm('Confirm Delete', 'This action is final. Gone forever!')
.switchMap(res => {if (res === true) {
return this.appService.deleteItem(this.dbTable, memberId);
}})
.subscribe(
result => {
this.success();
// Refresh DataTable to remove row.
this.updateDataTable (memberId);
},
(err: HttpErrorResponse) => {
console.log(err.error);
console.log(err.message);
this.messagesService.openDialog('Error', 'Delete did not happen.');
}
);
}
现在让我们删除或更新已删除或已编辑的行。
private dsData: any;
// Remove the deleted row from the data table. Need to remove from the downloaded data first.
private updateDataTable (itemId) {
this.dsData = this.dataSource.data;
if (this.dsData.length > 0) {
for (let i = 0; i < this.dsData.length; i++ ) {
if (this.dsData[i].member_id === itemId) {
this.dataSource.data.splice(i, 1);
}
}
}
this.dataSource.paginator = this.paginator;
}
答案 4 :(得分：3)
我在不使用模式窗口的情况下编辑表中的数据有一些解决方法。
您可以通过 Angular 6 和 Material
查看我的 CRUD 实现。数据服务
import {Injectable} from '@angular/core';
import {HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
import {User} from './user';
@Injectable()
export class UserService{
private url = "http://localhost:51120";
constructor(private http: HttpClient){ }
getUsers(){
let getUrl = this.url + "/api/all/";
return this.http.get(getUrl);
}
createUser(user: User){
let saveUrl = this.url + "/api/Users";
return this.http.post(saveUrl, user);
}
updateUser(id: number, user: User) {
const urlParams = new HttpParams().set("id", id.toString());
return this.http.post(this.url + "/api/update", user);
}
deleteUser(id: number){
const urlParams = new HttpParams().set("id", id.toString());
return this.http.delete(this.url + "/api/delete/" + id);
}
}
组件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [UserService]
})
export class AppComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
addNewUser: User[] = [
{ Id: 0, Name: null, Age: null, Email: null, Surname: null }
];
users: Array<User>;
showTable: boolean;
statusMessage: string;
isLoaded: boolean = true;
displayedColumnsUsers: string[] = ['Id', 'Name', 'Surname', 'Age', 'Email', 'Change', 'Delete'];
displayedColumnsAddUser: string[] = ['Name', 'Surname', 'Age', 'Email', 'Save', 'Cancel'];
dataSourceUsers: any;
dataSourceAddUser: any;
newUser : User;
constructor(private serv: UserService, public dialog: MatDialog, public snackBar: MatSnackBar) {
this.users = new Array<User>();
}
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.loadUsers();
this.dataSourceAddUser = new MatTableDataSource();
}
applyFilter(filterValue: string) {
this.dataSourceUsers.filter = filterValue.trim().toLowerCase();
if (this.dataSourceUsers.paginator) {
this.dataSourceUsers.paginator.firstPage();
}
}
private loadUsers() {
this.isLoaded = true;
this.serv.getUsers().subscribe((data: User[]) => {
this.users = data;
this.users.sort(function (obj1, obj2) {
// Descending: first id less than the previous
return obj2.Id - obj1.Id;
});
this.isLoaded = false;
this.dataSourceUsers = new MatTableDataSource(this.users);
this.dataSourceAddUser = new MatTableDataSource(this.addNewUser);
this.dataSourceUsers.sort = this.sort;
this.dataSourceUsers.paginator = this.paginator;
},
error => {
alert("Error: " + error.name);
this.isLoaded = false;
}
);
}
deleteUserForDialog(user: User) {
this.serv.deleteUser(user.Id).subscribe(data => {
this.statusMessage = 'User ' + user.Name + ' is deleted',
this.openSnackBar(this.statusMessage, "Success");
this.loadUsers();
})
}
editUser(user: User) {
this.serv.updateUser(user.Id, user).subscribe(data => {
this.statusMessage = 'User ' + user.Name + ' is updated',
this.openSnackBar(this.statusMessage, "Success");
this.loadUsers();
},
error => {
this.openSnackBar(error.statusText, "Error");
}
);
}
saveUser(user: User) {
if (user.Age != null && user.Name != null && user.Name != "" && user.Age != 0) {
this.serv.createUser(user).subscribe(data => {
this.statusMessage = 'User ' + user.Name + ' is added',
this.showTable = false;
this.openSnackBar(this.statusMessage, "Success");
this.loadUsers();
},
error => {
this.showTable = false;
this.openSnackBar(error.statusText, "Error");
}
);
}
else {
this.openSnackBar("Please enter correct data", "Error")
}
}
show() {
this.showTable = true;
this.addNewUser = [{ Id: 0, Name: null, Age: null, Email: null, Surname: null }];
}
cancel() {
this.showTable = false;
}
//snackBar
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 3000,
});
}
//material dialog
openDialog(element): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialogComponent,
{
width: '250px',
data: element,
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
if (result == "Confirm") {
this.deleteUserForDialog(element);
}
});
}
// Form field with error messages
name = new FormControl('', [Validators.required]);
getErrorMessage() {
return this.name.hasError('required') ? 'You must enter a value' :
this.name.hasError('name') ? 'Not a valid name' : '';
}
age = new FormControl('', [Validators.required]);
email = new FormControl('', [Validators.required, Validators.email]);
surnameFormControl= new FormControl('', [Validators.required]);
emailGetErrorMessage() {
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' :
'';
}
onSubmit(newUser:User){
this.newUser = new User(0,"",0,"","");
}
}
https://github.com/AleksandrChuikov/Angular6MaterialCRUD
以下是演示的链接： https://crud-angular6.azurewebsites.net
答案 5 :(得分：2)
你能看看
吗？addItem(baza: Baza): void {
this.httpClient.post(this.API_URL, Baza).subscribe(data => {
//THIS WAS MY BEST TRY BUT IT DOESN'T WORK :(
const copiedData = this.data.slice();
copiedData.push(baza);
console.log(copiedData);
this.dataChange.next(copiedData);
});
}
POST请求是否正常工作并发送数据？你在POST请求中引用了Baza，它应该是'baza'（小写B）。也许请求因为这个而失败，并且永远不会满足可观察的订阅......你可以在订阅上用错误处理程序仔细检查该理论。
addItem(baza: Baza): void {
this.httpClient.post(this.API_URL, baza).subscribe(data => {
const copiedData = this.data.slice();
copiedData.push(baza);
console.log(copiedData);
this.dataChange.next(copiedData);
}, (errror) => {
console.log(error);
});
}
最后，对于编辑，我的方法略有不同。将相同的DataService实例注入组件，并将此相同的引用传递给表DataSource而不是新实例。接下来，将整个baza对象传递给编辑对话框，而不仅仅是其属性。接下来，在对话框关闭时，传递原始（未编辑的对象）以及新属性（或者更好的是，带有已编辑字段的Baza类的新对象）。使用“编辑/更新”方法将这些发送到我们的数据服务。编辑/更新方法将过滤现有数据数组，查找与未编辑对象匹配的任何条目，并将它们设置为等于我们的新对象。下面给出了稍微抽象的例子
//例如成分
export class BazaComponent implements OnInit {
....
constructor(
public httpClient: HttpClient,
public dialog: MatDialog,
public dataService: DataService
){}
....
public loadData() {
this.dataSource = new ExampleDataSource(this.dataService, this.paginator, this.sort);
Observable.fromEvent(this.filter.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
if (!this.dataSource) {
return;
}
this.dataSource.filter = this.filter.nativeElement.value;
});
}
....
startEdit(baza: Baza) {
const dialogRef = this.dialog.open(EditDialogComponent, {
data: {
baza: baza
}
});
dialogRef.afterClosed().subscribe(result => {
// result will be simple array of our 'old' baza object that we passed in, and the 'new' baza object that contains the edits
this.dataService.updateItem(result[0], result[1]);
});
}
dialogRef.close(['close',editBaza,baza]);
//例如服务
export class DataService {
....
set data(data: Baza[]) {
this.dataChange.next(data);
}
....
updateItem(oldBaza: Baza, newBaza: Baza){
this.data = this.data.map((baza: Baza) => {
if(baza === oldBaza) return newBaza;
return baza;
});
}
答案 6 :(得分：2)
我的回答是在 Angular 6材料2 中。
我使用了// (1) delete document
_, err := e.client.Delete().Index(index).Type("entity").
Id(id).Do(e.ctx)
if err != nil {
fmt.Println(err.Error())
}
// (2) get all documents
result, err := e.client.Search().Index(index).From(1).Size(100).Do(e.ctx)
if err != nil {
log.Println(err)
}
fmt.Println(result.TotalHits())
// (3) wait
time.Sleep(3 * time.Second)
// (4) get all documents
result, err = e.client.Search().Index(index).From(1).Size(100).Do(e.ctx)
if err != nil {
log.Println(err)
}
fmt.Println(result.TotalHits())
函数，该函数将已编辑行的索引，然后是要删除的行数（在您的情况下为1）作为参数，然后将要插入的新版本的行作为参数该索引：
splice答案 7 :(得分：1)
实际上，如果您具有以下HTML，则实际上在编辑后您无需刷新表：
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="userName">
<mat-header-cell mat-sort-header> UserName </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.userName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-cell *matCellDef="let user">
<button mat-icon-button matTooltip="Edit" (click)="editUser(user)">
<mat-icon>edit</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
然后，在.ts中，您将拥有：
private editUser(user?: User) {
let userTest: User = user;
userTest.userName = "user123";
}
按下“编辑用户名更改”（在本例中为“ user123”）时，您会自动看到该行
答案 8 :(得分：1)
如果有人使用数组而不是Observable作为MatDataSource，那么我已经找到了对我有用的解决方法。 这是我的数据源
this.dataSource = new MatTableDataSource(ingredientList);
这是我的更新方法
updateRowData(id, newData): void {
const index = this.dataSource.data.findIndex((inc: any) => inc.ingredientId === id);
if (index !== -1) {
this.dataSource.data[index] = newData;
this.dataSource.data = this.dataSource.data.slice(0);
this.table.renderRows();
}
}
答案 9 :(得分：0)
jobposting.component.ts文件的结构：
export class JobPostingComponent implements OnInit {
values: JobPosting[];
columns: string[] = ['title', 'vacancies','division.name'];
displayedColumns: string[] = ['actions'].concat(this.columns);
dataSource: MatTableDataSource<JobPosting>;
我将findIndex用于要更新的行，并将该行的更新后的值插入到values数组的索引中。
onEdit(data: JobPosting) {
const dialogRef = this.dialog.open(AddJobPostingComponent, {
data,
width: '1000px'
});
dialogRef.afterClosed().subscribe(res => {
if (res !== undefined) {
const id = res.id;
const index = this.values.findIndex(x => x.id === id);
this.values[index] = res;
this.dataSource.data = this.values;
}
});
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？