解析json存储为json angular中的字符串

Question

我正在Angular 6中开发一个应用程序，并且有一个像这样编写的服务调用

getAll(): Observable<PagedResponse<HumanReviewWorkItem>> {

if (this.api_url === null) {
  return throwError(this.error);
}

return this.http.get<PagedResponse<HumanReviewWorkItem>>(this.api_url)
  .pipe(map((response: PagedResponse<HumanReviewWorkItem>) => {
    console.log(response)
    this.workItemsSvc.addItems(response.value);
    return response;
  }), catchError(this.handleError));
}

从服务器获取结果如下

 {
 "page": 1,
 "pageSize": 50,
 "totalItems": 18496,
 "totalPages": 370,
 "value": [
  {
  "name": "Mismatch FilingYear 2",
  "description": "Case ID - 1047757",
  "formDefinitionJson": "{"original":{"state":"Alabama"}}""
  },
  {
  "name": "Mismatch FilingYear 5",
  "description": "Case ID - 4917071",
  "formDefinitionJson": "{"original":{"state":"Alabama"}}""
  }
 ],
"isSuccessful": true,
"errorMessages": []
}

我将json中的值数组绑定到角度材质表，并且需要为状态显示单独的列。

我需要使用像{{item.formDefinitionJson.original.state}}这样的插值在html上的formDefinitionJson信息中显示状态。

我尝试使用JSON.parse（JSON.stringify（response））但无法将formDefinitionJson解析为json

<mat-table #table [dataSource]="dataSource" matSort>
                              <!--- Note that these columns can be defined in any order.
                                    The actual rendered columns are set as a property on the row definition" -->

                              <!-- Locked Column -->
                              <ng-container matColumnDef="locked">
                                <mat-header-cell *matHeaderCellDef>  </mat-header-cell>
                                  <mat-cell *matCellDef="let item">
                                      <div *ngIf="item.lockedBy !== null; else editBlock">
                                          <i class="material-icons not-allowed" matTooltip="Locked by: {{item.lockedBy}}" [matTooltipPosition]="'right'">lock_outline</i>
                                      </div>
                                      <ng-template #editBlock>
                                          <i class="material-icons pointer" matTooltip="Click to Edit workItem via route: {{clientRoute}}" [matTooltipPosition]="'right'" [routerLink]="[clientRoute, item.workItemGuid]">mode_edit</i>
                                      </ng-template>
                                  </mat-cell>
                              </ng-container>

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

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

                              <!-- State Column -->
                              <ng-container matColumnDef="state">
                                <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
                                <mat-cell *matCellDef="let item"> {{item.formDefinitionJson.original.state}} </mat-cell>
                              </ng-container>

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

有人可以帮忙吗？提前致谢

Answer 1

你也可以发布对应class/interface typescript file的HumanReviewWorkItem吗？它是否包含与formDefinitionJson相对应的字段？你在控制台上收到任何错误吗？

我认为将formDefinitionJson从字符串转换为具有所需字段的对象应该使它无缝地工作。