angular - 如何将 IActionResult 数据分配给 MatTableDataSource？

Question

我正在尝试将 ASP.Net Core 2.1 API 数据转换为角度，但它失败并出现错误 - 尝试区分“[object object]”时出错。只允许使用数组和可迭代对象。

我正在尝试获取图像数据并将其显示在 UI 中。

memberattributes.component.HTML：

<div >
  <table mat-table [dataSource]="imageResults" align="center">
    <tr *ngFor="let row of imageResults">
      <td></td>
    </tr>
    <!-- Column 1 -->
    <ng-container matColumnDef="ImageID">
      <th mat-header-cell *matHeaderCellDef class="textalign"> Image ID </th>
      <td mat-cell *matCellDef="let element; let i = index;" >
          <button mat-button  class="textalign btnhyplink" (click)="GetImageId(i)">{{element.ImageID}}</button></td>
    </ng-container>

    <!-- Column 2 -->
    <ng-container matColumnDef="ReceivedDate">
      <th mat-header-cell *matHeaderCellDef class="textalign"> Received Date </th>
      <td mat-cell *matCellDef="let element" class="textalign" > {{element.ReceivedDate}} </td>
    </ng-container>

    <!-- Column 3 -->
    <ng-container matColumnDef="ImageType">
      <th mat-header-cell *matHeaderCellDef class="textalign"> Image Type </th>
      <td mat-cell *matCellDef="let element" class="textalign"> {{element.ImageType}} </td>
    </ng-container>

    <!-- Column 4 -->
    <ng-container matColumnDef="Viewdetails">
      <th mat-header-cell *matHeaderCellDef class="textalign"> View Details </th>
      <td mat-cell *matCellDef="let element" class="textalign"><img src="../../../../assets/images/linkicon.png" width="15" height="15"> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr></tr>
  </table>
</div>
<div>
  <mat-paginator #paginator
  (page)="getUpdate($event)"
  [pageSize]="10"
  [pageSizeOptions]="[5,10,15]" showFirstLastButtons></mat-paginator> 
</div>

memberattributes.component.ts

GetImages(Value: string) {    this.memberattributeservice.GetImages(this.memberinfo.UniquePersonId).subscribe(
      (data) => {
        console.log(data);
        this.imageResults = new MatTableDataSource(data);
        this.imageResults.paginator = this.paginator;
      }, (apiError) => {
        this.sharedService.alert(apiError.error);
      }
    );

memberattributes.service.ts：

GetImages(Value:string) : Observable<Image[]>{
const data: ImageSearchParameters = {Value};
return this.http.post<Image[]>(this.constantsService.rootUrl + 'ImageSearch/GetImages', data, this.httpOptions);  
}

Web API - ASP.Net Core 2.1

#region HTTP methods
        [HttpPost, Route("GetImageId")]
        public IActionResult GetImageId([FromBody]ImageSearchParameters param)
        {
            try
            {
                var search = new GetImageFromPathContext();
                string ImageId;
                if (param.ImagePath != null)
                {
                    ImageId = search.GetImageFromPath(param);
                    return Ok(ImageId);
                }
                else
                {
                    ImageId = "";
                    return Ok(ImageId);
                }

            }

标签： angular