Angular, push form data object into observable array 循环MatDataSource中的数据

Question

我想通过将数据保存在数组对象(IUser[]) 中来进行crud 操作。所以，我完成了将表单数据添加到数组并将其显示在 datatable 中并编辑，删除也通过正常的 table 和 *ngFor.

完成

现在我想使用 MatDataSource 创建相同的对象。我从一天开始就在努力。谁能帮帮我。 tq 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。是对 SO 解释差异的一个很好的回答。

我删除了示例中不需要的代码，并制作了一个 table 向您展示如何使用硬编码数据编辑、删除或添加新数据，因为您已经启动了对话框并且运行]，你只需要使用函数作为例子。

Here 是 stackblitz。我使用了 Angular 和 Angular Material 的最新版本，因为我不清楚您使用的是哪个版本。希望对您有所帮助。

Angular, push form data object into observable array 循环MatDataSource中的数据

Angular, push form data object into observable array and loop the data in MatDataSource

datasource

observable

angular-material

angular