ngSwitch 导致属性在类型错误中不存在

Question

我正在使用来自 API 的数据填充材料数据表，并希望根据 powershell.Status 中的文本更改单元格，但使用 [ngSwitch] 会导致以下错误：

错误： src/app/shared/components/rsio-table/rsio-table.component.html:16:38 - 错误 TS2339：类型上不存在属性“powershell” 'RsioTableComponent'。

16 ~~~~~~~~~~

src/app/shared/components/rsio-table/rsio-table.component.ts:9:16 9 模板网址：'./rsio-table.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件RsioTableComponent的模板出错。

如果没有 switch 语句，powershell.Status 中的文本会正确显示。

rsio-table.component.html:

   <div>
        <mat-table [dataSource]="dataSource" class="mat-elevation-z3">
    
            <ng-container matColumnDef="Name">
                <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
                <mat-cell *matCellDef="let powershell">{{powershell.Name}}</mat-cell>
            </ng-container>
    
            <ng-container matColumnDef="Description">
                <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
                <mat-cell *matCellDef="let powershell">{{powershell.Description}}</mat-cell>
            </ng-container>
    
            <ng-container matColumnDef="Status">
                <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
                <ng-container [ngSwitch]="powershell.Status">
                    <ng-container *ngSwitchCase="'Running'">
                        <mat-cell *matCellDef="let powershell">{{powershell.Status}}</mat-cell>
                    </ng-container>
                    <ng-container *ngSwitchDefault>Something else</ng-container>
                </ng-container>
            </ng-container>
    
            <ng-container matColumnDef="options">
                <mat-header-cell *matHeaderCellDef>Options</mat-header-cell>
                <mat-cell *matCellDef="let powershell">
                    <button mat-icon-button [matMenuTriggerFor]="appMenu">
                        <mat-icon>menu</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>
    
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></mat-row>
    
        </mat-table>
    </div>
    
    <mat-menu #appMenu="matMenu">
        <button mat-menu-item>Restart</button>
    </mat-menu>

rsio-table.component.ts:

import { Component, OnInit } from '@angular/core';
import { PowershellService } from 'src/app/services/powershell.service';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import { powershell } from 'src/app/models/powershell.model';

@Component({
  selector: 'app-rsio-table',
  templateUrl: './rsio-table.component.html',
  styleUrls: ['./rsio-table.component.scss']
})
export class RsioTableComponent implements OnInit {

  dataSource = new PowerShellDataSource(this.powershellService);
  displayedColumns = ['Name', 'Description', 'Status', 'options'];

  constructor(private powershellService: PowershellService) { }

  ngOnInit() {
  }

}


export class PowerShellDataSource extends DataSource<any> {

  constructor(private powershellService: PowershellService) {
    super();
  }

  connect(): Observable<powershell[]> {
    return this.powershellService.getPowershell();
  }

  disconnect() { };
}

如何正确使用ngSwitch查看powershell.Status的文本？

更新：在接受的答案的帮助下，我成功了。这就是我最后的做法：

<ng-container matColumnDef="Status">
    <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
    <ng-container *matCellDef="let powershell">
        <mat-cell [ngSwitch]="powershell.Status">
            <ng-container *ngSwitchCase="'Running'">
                <mat-chip-list>
                    <mat-chip class="running" selected>Running</mat-chip>
                </mat-chip-list>
            </ng-container>
            <ng-container *ngSwitchCase="'Stopped'">
                <mat-chip-list>
                    <mat-chip class="stopped" selected>Stopped</mat-chip>
                </mat-chip-list>
            </ng-container>
            <ng-container *ngSwitchDefault>
                <mat-chip-list>
                    <mat-chip>{{powershell.Status}}</mat-chip>
                </mat-chip-list>
            </ng-container>
        </mat-cell>
    </ng-container>
</ng-container>

Answer 1

问题似乎不在于 ngSwitch，而在于您访问 mat-cell 数据的方式。

     <ng-container [ngSwitch]="powershell.Status">
         <ng-container *ngSwitchCase="'Running'">
             <mat-cell *matCellDef="let powershell">{{powershell.Status}}</mat-cell> // powershell object can only accessible here but not outside of this tag
         </ng-container>
     <ng-container *ngSwitchDefault>Something else</ng-container>

你不能访问<mat-cell>标签之外的powershell变量，如果需要的话，我们需要在其中执行此操作的任何条件。

这些链接可能有用

• https://github.com/angular/components/issues/16273
• https://stackoverflow.com/a/57242163/9764133

编码愉快.. :)