>

앵귤러 머티리얼에서 Angular 데이터 테이블 을 구현했습니다.

다음 코드를 사용하여 API에서 데이터를 읽고 테이블을 채 웁니다.

@ViewChild('filter') filter: ElementRef;
  dataSource: MyDataSource | null;
  dataSubject = new BehaviorSubject<any[]>([]);
  displayedColumns = ['name'];
    constructor(private appService: ApplicationsService) {
    this.appService.getAllApps().subscribe({
      next: value => this.dataSubject.next(value)
    });
  }
  ngOnInit() {
    this.dataSource = new MyDataSource(this.dataSubject);
  }
export class MyDataSource extends DataSource<any[]> {
  constructor(private subject: BehaviorSubject<any[]>) {
    super ();
  }
  connect (): Observable<any[]> {
    return this.subject.asObservable();
  }
  disconnect (  ): void {
  }
}

내 템플릿 :

<md-table #table [dataSource]="dataSource">
          <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->
          <!-- name Column -->
          <ng-container mdColumnDef="name">
            <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
            <md-cell *mdCellDef="let row" (click)="viewApp(row)"> {{row.name}} </md-cell>
          </ng-container>
          <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
          <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
        </md-table>

사용자가 이런 식으로 버튼을 클릭하면 표를 업데이트하려고합니다 :

buttonClick() {
    this.appService.geAnotherApps()
                .subscribe({
                next: value => this.dataSubject.next(value)
              });
}

하지만 표는 업데이트되지 않습니다.

<올>
  • 테이블이 업데이트되지 않는 이유는 무엇입니까?
  • 입력을 기반으로 테이블을 필터링하려면 어떻게합니까?

    • 답변 # 1

      하나의 솔루션은 다음과 같이 HTML에서 Action-Column을 정의합니다.

      <ng-container matColumnDef="actions">
              <mat-cell *matCellDef="let model">
                <button mat-icon-button matTooltip="Edit" (click)="edit(model)">
                  <mat-icon>edit</mat-icon>
                </button>
              </mat-cell>
      </ng-container>
      
      

      버전을 적용한 후 편집 할 전체 요소를 전달하면 표를 자동으로 새로 고칠 수 있습니다.

      .ts에서 당신은 다음과 같은 것을 가질 것입니다 :

      private edit(element?: Model) {
          // In this case i use Mat-Dialog from edition
          let dialogRef = this.dialog.open(EditDialogComponent,
        {
          panelClass: 'mat-dialog-lg',
          data: { element: element }
        });
      dialogRef.afterClosed().subscribe(response => {
        if (response) {
          // For change the data in the table list you have to assign the response to your element
          element = response;
        }
      });
      
      

      }

      요소와 응답은 동일한 유형이어야합니다

    관련 자료

  • 이전 node.js - Nodejs와 Orientdb 데이터베이스 연결?
  • 다음 javascript - cytoscapejs 레이아웃 복합 노드