Angular, поместите объект данных формы в наблюдаемый массив и зациклируйте данные в matdatasource

Я хочу выполнять грубые операции, сохраняя данные в объекте массива (IUser []). Итак, я добавил данные формы в массив и показал их в таблице данных и редактировании, удаление также завершается обычной таблицей с * 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>

Можете ли вы создать из этого рабочий стек (stackblitz.com/fork/angular)? И попробуйте это: в вашем ngOnInit() поместите полученный массив в свой источник данных: this.dataSource.data = result;.

Agash Thamo. 10.08.2018 15:32

Я пробовал использовать stackblitz, но не смог. когда я пытался в своем локальном, я получил ошибку Cannot read property 'push' of undefined

chandoo 13.08.2018 06:58

Что ж, поскольку вы используете свою переменную userlist (внутри вашего класса Usermodel) в качестве массива, вы должны определить ее как одну и инициализировать ее, чтобы вы могли вставить в нее свой объект: private userlist: IUser[] = [];, попробуйте еще раз и обновите вопрос или прокомментируйте дальнейшие ошибки.

Agash Thamo. 13.08.2018 09:16

@AgashThamo. Я обновил вопрос и удалил правку и удаление, так как теперь они не требуются. Пожалуйста, помогите мне показать вставленные данные в таблице. Tq много.

chandoo 13.08.2018 09:47
0
4
754
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основываясь на ваших комментариях и вашем коде, я сделал небольшой пример, показывающий вам, как использовать Observables в сервисе, чтобы вы могли изменять, удалять и подписываться на изменения.

Просто вернуть Observable массива не получится, поскольку изменения не публикуются для подписчика. Вместо этого используйте BehaviorSubject. Здесь - хороший ответ на SO, объясняющий различия.

Я удалил код, который не был необходим для этого примера, и создал таблицу, показывающую вам, как редактировать, удалять или добавлять новые данные, используя жестко закодированные данные, поскольку вы уже запустили и запустили свои диалоги, вам просто нужно использовать функции в качестве примера.

Здесь - стек-блиц. Я использовал последние версии Angular и Angular Material, так как мне было непонятно, какую версию вы используете. Надеюсь, это поможет.

Thamo, Tq за поддержку. Я постараюсь решить проблему, перейдя по вашей ссылке на stackblitz.

chandoo 13.08.2018 12:47

Конечно, продолжайте, спросите, нужна ли вам дополнительная информация о коде или использовании. Если ваша версия Angular отличается, скажите, какую версию вы используете, чтобы я мог скорректировать ответ и создать для нее новый stackblitz.

Agash Thamo. 13.08.2018 13:12

Другие вопросы по теме

Angular redux @select () obs, могу ли я затем подписаться на это в моем контроллере, и шаблон все еще отменит мою подписку наdestroy?
Липкая строка angular material не работает
Какую сетку лучше всего использовать в angular 4+ с функциями поиска, сортировки, разбивки на страницы, а также простоту кодирования и интеграции
Угловой материал mattabledatasource серверная разбивка на страницы не работает
Невозможно выполнить привязку к 'datasource', поскольку это не известное свойство 'table', даже когда модули импортируются
Таблица материалов angular не отображает данные, пока я не щелкну по ссылкам на страницы
Список выбора углового материала - отключенные параметры могут быть выбраны / отменены с помощью клавиатуры
Angular reactive form mat-опция для передачи объекта
Могу ли я применить условный стиль css [ngclass] к компоненту материала (mat-checkbox)?
Как вызвать метод из другого компонента после полной загрузки представления (appcomponent)?