垫表不自动更新

Question

我有一个具有组件的Angular应用程序，该应用程序从服务中获取了一个硬编码列表，并订阅了可观察到的可观察列表，以便在更改列表时更新该列表。

我的服务正确地发出了值，当我浏览程序并卷土回到表中时，我的服务更新了。但是，当我从列表中删除元素时，它不会自动刷新。

html：

<div  class="mat-elevation-z8 center">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let process; let i = index">
        <div class="processes" [routerLink]="[process.name]" style="cursor: pointer;"> {{process.name}} </div>
      </td>
    </ng-container>

    <!-- Description Column -->
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
      <td mat-cell *matCellDef="let process">{{process.description}}</td>
    </ng-container>

    <!-- Last Updated Column -->
    <ng-container matColumnDef="lastUpdated">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Updated</th>
      <td mat-cell *matCellDef="let process">{{process.lastUpdated}}</td>
    </ng-container>

    <!-- SLA Column -->
    <ng-container matColumnDef="sla">
      <th mat-header-cell *matHeaderCellDef>SLA</th>
      <td mat-cell *matCellDef="let process">
        <div *ngFor="let sla of process.sla"> {{sla.name}} </div>
      </td>
    </ng-container>

    <!-- KPI Column -->
    <ng-container matColumnDef="kpi">
      <th mat-header-cell *matHeaderCellDef>KPI</th>
      <td mat-cell *matCellDef="let process">
        <div *ngFor="let kpi of process.kpi"> {{kpi.id}} </div>
      </td>
    </ng-container>

    <!-- Options Column -->
    <ng-container matColumnDef="options" >
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let process; let i = index">
        <svg [routerLink]="[process.name, 'edit']" class="option" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="cursor: pointer;">
          <path d="M18.363 8.464l1.433 1.431-12.67 12.669-7.125 1.436 1.439-7.127 12.665-12.668 1.431 1.431-12.255 12.224-.726 3.584 3.584-.723 12.224-12.257zm-.056-8.464l-2.815 2.817 5.691 5.692 2.817-2.821-5.693-5.688zm-12.318 18.718l11.313-11.316-.705-.707-11.313 11.314.705.709z"/>
        </svg>
        <svg (click)="deleteProcess(i)" class="option" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="20px" height="20px" viewBox="0 0 45.959 45.959" style="enable-background:new 0 0 45.959 45.959;"
          xml:space="preserve"      
          style="margin-left: 15px; cursor: pointer">
          <path d="M39.229,6.731c-8.975-8.974-23.523-8.974-32.498,0s-8.974,23.523,0,32.498c8.974,8.974,23.523,8.974,32.497-0.001
            C48.202,30.254,48.203,15.704,39.229,6.731z M32.363,26.711c1.561,1.561,1.561,4.092,0,5.651c-1.562,1.561-4.092,1.561-5.652,0
            l-3.748-3.749l-3.74,3.74c-1.561,1.562-4.074,1.578-5.635,0.019c-1.56-1.561-1.542-4.073,0.019-5.635l3.74-3.74L13.6,19.251
            c-1.561-1.561-1.567-4.098-0.006-5.658s4.096-1.556,5.656,0.005l3.749,3.749l3.74-3.74c1.561-1.561,4.073-1.578,5.634-0.019
            c1.561,1.561,1.543,4.074-0.019,5.635l-3.739,3.74L32.363,26.711z"/>
        </svg>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let processRow; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator #paginator
      [length]="dataSource?.data?.length"
      [pageIndex]="0"
      [pageSize]="10"
      [pageSizeOptions]="[5, 10, 20, 50]"
      aria-label="Select page">
  </mat-paginator>
</div>

打字稿：

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Process>;
dataSource: ProcessesListDataSource;

/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['name', 'description', 'lastUpdated', 'sla', 'kpi', 'options'];

processSub: Subscription;

constructor(private processesService: ProcessesService) { }

ngOnInit(): void {
  this.dataSource = new ProcessesListDataSource(this.processesService.getProcesses());
    
  this.processSub = this.processesService.processesChanged.subscribe(
    (processes: Process[]) => {
      this.dataSource.data = processes;
      this.table.dataSource = this.dataSource;
    }
  );
}

ngOnDestroy(): void {
  this.processSub.unsubscribe();
}

ngAfterViewInit(): void {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
  this.table.dataSource = this.dataSource;  
}

deleteProcess(index: number) {
  this.processesService.deleteProcess(index);
}

流程服务：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
import { Process } from "../models/process.model";

@Injectable()
export class ProcessesService {
    
    // Para o caso de receber do backend
    /* processesChanged: Subject<string[]>;  */

    processesChanged = new Subject<Process[]>();

    private processes: Process[] = [
        {
            name: 'PQS1_RES_FIBER_REQ_VDF',
            description: 'sfiojsdfjlskamfdfsa',
            lastUpdated: '2022-01-01 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS1_RES_FIBER_REQ_PTC',
            description: 'fdfsfdffd',
            lastUpdated: '2022-05-15 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS2_MTR_URG_JI_DIRECT',
            description: 'jvvrrrttrrtrtrt',
            lastUpdated: '2022-01-03 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS2_MTR_URG_SIMPLE',
            description: 'plpldofjdufdknfv',
            lastUpdated: '2022-02-11 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS3_MTR_NOR',
            description: '893h3nkjbjkf',
            lastUpdated: '2022-01-02 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS4_V_NETWORK_CON',
            description: 'qwertyuio',
            lastUpdated: '2022-01-06 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS5_CO_ACCESS',
            description: 'ncduhudtcuydctuidcdc',
            lastUpdated: '2022-02-09 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        },
        {
            name: 'PQS6_ADD_CORRECTION',
            description: 'joifnk4fjkbb84',
            lastUpdated: '2022-03-20 (PT)',
            sla: [
                {
                    name: 'qqsla',
                    expression: 'dasdasd',
                    condition: 'aasdasdad',
                    threshold: 40,
                    objective: 20,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    name: 'qqsla2',
                    expression: 'dasdasd',
                    condition: 'ddddd',
                    threshold: 40,
                    objective: 10,
                    lastUpdated: '2022-01-04 (AL)'
                }
            ],
            kpi: [
                {
                    id: 'K123123',
                    expression: 'count(sla(tempoTotal,compliant))/count',
                    aggregation: 'Month',
                    condition: 'Reabertura=true',
                    objective: 100,
                    alert: 50,
                    care: 40,
                    lastUpdated: '2022-01-01 (SP)'
                },
                {
                    id: 'K008464',
                    expression: 'avg(timer(preValidationTime))',
                    aggregation: 'Month',
                    condition: '*',
                    objective: 150,
                    alert: 110,
                    care: -1,
                    lastUpdated: '2022-04-10 (AL)'
                }
            ]
        }
    ];

    getProcesses(): Process[] {
        return this.processes.slice();
    }

    getProcessByName(name: string): Process {
        return this.processes.find((process: Process) => process.name === name);
    }

    addProcess(process: Process) {
        this.processes.push(process);
        this.processesChanged.next(this.processes.slice());
    }

    deleteProcess(index: number) {
        this.processes.splice(index, 1);
        this.processesChanged.next(this.processes.slice());
    }

}

Answer 1

尝试使用简单的数据源。为此，您可以使用

ngOnInit(): void {

  //use pipe(startsWith) to give value to dataSource without wait
  // changes

  this.processSub = this.processesService.processesChanged.pipe(
    startsWith(null)
    ).subscribe(
     (processes: Process[]) => {
        this.dataSource = new MatTableDataSource(processes);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
    });
}

（您可以删除ngafterviewinit），

如果可行