Добавление элементов в таблицу угловых материалов

Привет, я хочу поместить объект в данные элемента массива и отобразить в таблице, но когда я это делаю, ничего не происходит, моя таблица пуста. Я новичок в этом, и я учусь, где я сделал ошибку?

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

Компонент приложения:

    export interface PeriodicElement {
      videoname: string;
      url: string;
      author: string;
      description: string;
    }

    const ELEMENT_DATA: PeriodicElement[] = [];

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
      title = 'Zadatak';

      displayedColumns: string[] = ['videoname', 'author', 'description', 'url' ];
      dataSource = ELEMENT_DATA;

      constructor(public dialog: MatDialog, private changeDetectorRefs: ChangeDetectorRef) {}


      openDialog(): void {
      const dialogRef = this.dialog.open(AddVideoFormComponent);
      dialogRef.afterClosed().subscribe(data => {
      ELEMENT_DATA.push(data);
      });
      }
    }

Компонент диалога:

export class AddVideoFormComponent implements OnInit {
  videoForm: FormGroup;

  constructor(public dialogRef: MatDialogRef<AddVideoFormComponent>) { }

  ngOnInit() {
    this.videoForm = new FormGroup({
      videoname : new FormControl('', Validators.required),
      url : new FormControl('', Validators.required),
      author : new FormControl('', Validators.required),
      description : new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    this.dialogRef.close(this.videoForm.value);
  }
}

list arrays angular material-table push
person Mladen Nikolić    schedule 24.03.2020    source источник
comment
Не могли бы вы поделиться примером stackblitz?   -  person prathameshk73    schedule 24.03.2020
comment
stackoverflow.com/questions/47581267/   -  person Eliseo    schedule 24.03.2020
comment
В этом примере только 1 компонент, я не понимаю, как связать add() с кнопкой в ​​другом компоненте? Спасибо. Я сделал так, но все равно не работает: openDialog(): void { const dialogRef = this.dialog.open(AddVideoFormComponent); dialogRef.afterClosed().subscribe(data =› { this.dataSource.data.push(ELEMENT_DATA[this.index++]); this.table.renderRows(); }); }   -  person Mladen Nikolić    schedule 24.03.2020
comment
нет, ваш толчок должен быть this.dataSource.push(data);. В моем, например. нажмите элемент из массива, вы добавляете элемент из данных, которые вы заполнили в диалоговом окне   -  person Eliseo    schedule 24.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

просто добавьте ссылочную переменную в свою таблицу (да, #table)

<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  ...
</table>

Добавьте viewChild в свой app.component

import {MatTable} from '@angular/material/table' //<--you need import MatTable

@ViewChild('table', { static: true,read:MatTable }) table

В вашей функции openDialog

 openDialog(): void {
      const dialogRef = this.dialog.open(AddVideoFormComponent);
      dialogRef.afterClosed().subscribe(data => {
        this.dataSource.push(data); //<--make the push on dataSource
        this.table.renderRows()  //<--say to Angular that render the rows
      });
  }
person Eliseo    schedule 24.03.2020
comment
Вы мне так помогли, если я вас когда-нибудь увижу, выпейте пива! - person Mladen Nikolić; 24.03.2020
comment
Ага, рассчитывай :) - person Eliseo; 24.03.2020