2

mat-table私はAngular 5プロジェクトで使用しました。テーブルは、さまざまなデータと削除のオプションで構成されます。データが削除されても、ページをリロードしない限りテーブルから消えません。パッケージから使用さspliceれた別のデータテーブルで使用したことがあり、正常に機能しましたがmat-table、同じことはできませんでした。

私のテーブルのビュー:

<h5>User List </h5>
<div class="example-container mat-elevation-z8">
    <div class="example-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter">
        </mat-form-field>
    </div>

    <mat-table #table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> User ID</mat-header-cell>
            <mat-cell *matCellDef="let item">
                {{item.id}}
                <span (click)="editUserData(item)"> edit </span>
                <span (click)="viewUserData(item)"> view </span>
                <span (click)="confirmDelete(item)"> delete </span>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.full_name}}</mat-cell>
        </ng-container>

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

        <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Email</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.email}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="organization">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Organization</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.organization}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> status</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.status}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

データソースを設定したコンポーネントの ngOnit 部分:

ngOnInit()
{

    this.appService.getUserDataList().subscribe(res => {
        this.employeeTemp = res;
        console.log('THIS IS AGAIN ME', this.employeeTemp);
        this.dataSource = new MatTableDataSource(this.employeeTemp);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;

    });

}

私のconfirmDelete機能:

confirmDelete(item)
{
    this.confirmationService.confirm({
        message: 'Are you sure you want to delete this Employee?',
        header: 'Confirmation',
        accept: () => {
            this.appService.deleteUser(item.id).subscribe(res => {
                    // Splice Or something so the page doesnt reload but the data gets removed from the view.
                    const index = this.dataSource.indexOf(item);
                    this.dataSource.splice(index, 1);
                    this.flashMsg.flashMsg('success', 'Deleted', 'User has been deleted.'); //  this.EmployeeListComponent();
                },
                err => {
                    this.flashMsg.flashMsg('error', 'Error', 'User has not been deleted.');
                });
        },
        reject: () => {
        },
    });
}

item関数に格納されている値confirmDelete:

address :" "
email:"asd@asdasd.asdasd"
full_name:"asdf asdf"
id:"asdadasd@asdasd.asdasd"
mobile:"12345678"
organization:"VURUNG TECH"
status:"Active"
updated_at:"2018-06-20T05:15:52.000Z

成功flashMessageが表示されますが、スプライスが機能しません。

4

4 に答える 4

0

モデルの変更後に変更検出の実行を呼び出してみてください。

constructor(private cdr:ChangeDetectionRef)

と

this.appService.deleteUser(item.id).subscribe(res => {
         ....
         this.cdr.detectChanges();
        ....
      },
于 2018-06-21T05:08:10.490 に答える
0

これらの手順を正確に再現してください。

-> ステップ#1

dataSource: any = new MatTableDataSource()

-> Step#2 インデックスでスプライス

this.dataSource.data.splice(currentIndex, 1);

-> Step#3 次に、ビューを更新します

 this.dataSource._data.next(this.dataSource.data)

非常に重要:このエラーを回避するには

「プロパティ '_data' はプライベートであり、クラス 'MatTableDataSource 内でのみアクセス可能です」

dataSource を忘れないでください:

step#1 'dataSource : any'

-> ステップ #2 の詳細 (情報のみ)

コンソールすると'_data'、dataSource の動作サブジェクト プロパティが表示されます。ビューが更新されるように、更新します。 コンソールに表示すると、dataSouce の動作 ('_data') サブジェクト プロパティが表示されます。 ビューが更新されるように更新します

于 2020-04-21T09:04:16.207 に答える