如何从RxJS Observable嵌套响应取值并在Angular模板展示

我接触Angular仅两周，属于新手，目前在工作中面临时间压力，查阅RxJS示例多日仍未解决问题。我开发的小型Angular应用调用RESTful API后，需从如下API响应中提取flagName属性的值"F86292"：

API响应示例：

{
    "headers": {},
    "body": [
        {
            "flagId": 2,
            "flagParentId": 0,
            "flagTypeId": 1,
            "flagName": "F86292",
            "flagDesc": null,
            "flagToggleState": 0
        }
    ],
    "statusCode": "OK",
    "statusCodeValue": 200
}

我已通过以下代码成功调用API并获取上述JSON数据：

interface ServerData {
  headers: Object;
  body: Array<any>;
  statusCodeValue: number;
  statusCode: string;
}

// ...

flagData$: Observable<ServerData>;

// ...

this.flagData$ = this.http.get<ServerData>(this.url, options).pipe(
  map(
    response =>
      ({
        headers: response.headers,
        body: response.body,
        statusCodeValue: response.statusCodeValue,
        statusCode: response.statusCode
      } as ServerData)
  )
);

目前我能在HTML模板中展示statusCodeValue和statusCode等一级属性，但无法提取响应body中的flagName等属性：

<table *ngIf="flagData$ | async as flag">
  <tr>
    <td class="heading">
      Flag Id
    </td>
    <td>
      {{ flag.statusCode }}
    </td>
  </tr>
</table>

我尝试过pipe、map等多种示例，但均未成功。

注：根据Zircon的建议，我已将ServerData中的body类型从body: Object;改为body: Array<any>;，结合其解决方案后问题已解决！感谢Zircon！

内容的提问来源于stack exchange，提问作者jeff