材料表数据源中的单个静态对象

Question

是否可以在材料表数据源中传递单个静态对象而不是用户信息列表？

带有数据的用户对象 - {idUser:1, lastName: "xyz", firstName: "abc" }

其中 idUser 取自 URL 参数。

并使用带有多个“mat-cell”标签的材料表显示。

示例： html文件包含

<mat-table #table *ngIf="userInfo">

        <ng-container matColumnDef="label"> 
            <mat-header-cell *matHeaderCellDef>Label</mat-header-cell>
            <mat-cell *matCellDef>Id User</mat-cell>
            <mat-cell *matCellDef>First Name</mat-cell>
            <mat-cell *matCellDef>Last Name</mat-cell>
        </ng-container> 
        <ng-container matColumnDef="value"> 
            <mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.iduser}}</mat-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.lastname}}</mat-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.firstname}}</mat-cell>
        </ng-container> 

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

Component.ts 包含：

userInfo: User;
idUser: number;
dataSource;
statusMsg = 'xyz';
displayedColumns = ['label', 'value'];

ngOnInit(): void {

    // Subscribing for the Routing - URL params       
    this.activatedRoute.queryParams.subscribe(params => {
        this.idUser = params['idUser'];
      });

    /// Subscribing for the User table DataSource 
this.userService.getUser(this.idUser)
    .subscribe((resultArray: User) => {
        if (!resultArray) {
            return console.log("no results !");
        }

            console.log(resultArray);
        this.dataSource.data = new MatTableDataSource(resultArray); 

    });
}

用户服务包含：

 private userInfoUrl = 'http://localhost:8080/users/getUsersInfo?idUser=';

 constructor(private http: HttpClient) { }

 // Service method for getting information on specific User
 getUser(iduser: number): Observable<User> {
        return this.http.get<User>(this.userInfoUrl + iduser)
          .catch(this.handleError);
    }

Answer 1

我在您的代码中发现了以下几点：

在 HTML 中

表中缺少数据源，你必须这样做：

<mat-table #table [dataSource]="dataSource" *ngIf="userInfo">
    <ng-container matColumnDef="idUser">
      <mat-header-cell *matHeaderCellDef> Id User </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.idUser}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Component.ts

displayedColumns = ['idUser', 'firstName', 'lastName'];
ngOnInit(): void {

    // Subscribing for the Routing - URL params       
    this.activatedRoute.queryParams.subscribe(params => {
        this.idUser = params['idUser'];
    });

    /// Subscribing for the User table DataSource 
    this.userService.getUser(this.idUser).subscribe((resultArray: User) => {
        if (!resultArray) {
            return console.log("no results !");
        }

        console.log(resultArray);
        this.dataSource = new MatTableDataSource(resultArray);
        //you can also use
        //this.dataSource = resultArray;

    });
}