Question

我想通过将数据保存在数组对象（ IUser [] ）中来执行粗操作。因此，我完成了将表单数据添加到数组并将其显示在数据表中并进行编辑，并且删除也由普通表使用* ngFor完成。

现在，我想使用MatDataSource创建相同的内容。我从一天开始尝试。谁能帮我。 q usermodel.ts

export class Usermodel {
    user: IUser= [];        
    userlist: any;

    constructor() { }

    addOject(user: IUser): void {
        this.user = user;
        this.userlist.push(this.user);
    }

    getUsers():  Observable<IUser[]> {
        return Observable.of(this.userlist);
    }
}

userdialogue.component.ts

export class UserdialogueComponent implements OnInit {

  userList: IUser[];

  // for table and pagination
  displayedColumns = ['userid', 'firstName', 'mobile', 'lastName'];
  dataSource = new MatTableDataSource<IUser>(this.userList);

  constructor(private dialog: MatDialog, private user: Usermodel) { }

  ngOnInit() {        
    this.user.getUsers()
      .subscribe(result => {
        this.userList = result;
        this.dataSource.data = this.userList;
      });
  }      

  openDialog(): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    const dialogRef = this.dialog.open(UserformComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {

      const userData = {
        id: this.generateRandom(),
        firstName: result.data.firstName,
        lastName: result.data.lastName,
        userid: result.data.userid,
        mobile: result.data.mobile,
        accsprofile: result.data.accsprofile
      };

      this.user.addOject(userData);
    });
  }

  editDialog(userData: IUser): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    dialogConfig.data = userData;
    const dialogRef = this.dialog.open(UserformComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      // console.log('Data inserted into records', result);
      if (this.isAnObject(result) && this.isEmptyObject(result)) {
        const userFormData = {
          id: result.data.id,
          firstName: result.data.firstName,
          lastName: result.data.lastName,
          userid: result.data.userid,
          mobile: result.data.mobile,
          accsprofile: result.data.accsprofile
        };

        this.user.updateUser(userFormData);
        console.log('update done', result);
      }
    });
  }      

  deleteDialog(userData: IUser): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    // dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    dialogConfig.data = { userid: userData.userid, id: userData.id };
    const dialogRef = this.dialog.open(UserdeleteComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {          
      if (result) {
        this.user.deleteUser(result.id);
        console.log('deleted userid:', result.id);           
      }
    });
  }

  generateRandom(): number {
    return Math.floor((Math.random() * 100) + 1);
  }      
}

userdialogue.componet.html

<mat-table #table *ngIf [dataSource]="dataSource">
          <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.firstName}} </mat-cell>
          </ng-container>


          <ng-container matColumnDef="userid">
            <mat-header-cell *matHeaderCellDef> User ID </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.userid}} </mat-cell>
          </ng-container>


          <ng-container matColumnDef="mobile">
            <mat-header-cell *matHeaderCellDef> Mobile </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.mobile}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

Answer 1

根据您的评论和代码，我做了一个小示例，向您展示了如何在服务中使用Observables，以便您可以更改，删除和订阅更改。

仅返回一个数组的Observable不会起作用，因为所做的更改不会发布给订阅者。请改用BehaviorSubject。 Here是SO解释差异的好答案。

我删除了该示例不需要的代码，并制作了一张表格，向您展示如何使用硬编码数据编辑，删除或添加新数据，因为已经启动并运行了对话框，您只需要使用以下功能即可：一个例子。

Here是堆叠闪电战。我使用的是Angular和Angular Material的最新版本，因为不清楚我使用的是哪个版本。我希望这会有所帮助。

有角，将表单数据对象推入可观察的数组，然后在MatDataSource

1 个答案: