无法使用 Angular 中的键值对和 firebase 访问内部对象

Question

我有一个 json 对象，它有一个名为数据的内部对象，它有数据：{count: 9, message: "9 sites synced"} - 还有 json 对象。我试图从消息中获取价值，而不是从计数中获取价值。这是我的模板代码：

<div class="full-width border-radius-4 overflow-hidden">
  <!-- Header -->
  <div class="head accent p-24 pb-16" fxLayout="column" fxLayoutAlign="space-between">
    <div fxLayout="row" fxLayoutAlign="end center">
    </div>
  </div>
  <mat-accordion class="full-width example-headers-align" multi *ngIf="liveActions$ | async as actions; else: loading">
    <mat-expansion-panel *ngFor="let action of actions">
      <mat-expansion-panel-header *ngIf="action.type == 'single'">
        <mat-panel-description fxFlex="30%">
          <div class="lgreen material-icons" *ngIf="action.status  == 'completed'">done_all</div>
          <div class="red material-icons" *ngIf="action.status == 'pending'">pending_actions</div>
          <div class="blue material-icons" *ngIf="action.status == 'queued'">pending</div>
          <div class="yellow material-icons" *ngIf="action.status == 'error'">error</div>
        </mat-panel-description>
        <mat-panel-description fxFlex="40%">{{action.key}}</mat-panel-description>
        <div *ngFor="let dataItem of action?.data | keyvalue">{{dataItem?.value?.message}}
        </div>
        <!--        <mat-panel-description>{{action.startDate | date:'medium'}}</mat-panel-description>-->
      </mat-expansion-panel-header>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
  <ng-template #loading>Loading&hellip;</ng-template>
</div>

当我执行 {{dataItem?.value?.message}} 时，我什么也没得到。当我执行 dataItem.value 时，我得到了计数和消息的值。

我只需要消息中的值。我做错了什么？？

Answer 1

在你的对象上使用 keyvalue 管道，它会将 action.data 对象转换为以下数组

[{key:count, value: 9}, {key:message,value:'9 sites synced'}]

如果您遍历上述对象：

dataItem?.value?.message = undefined
dataItem.value = 9 and 9 sites synced

这是你看到的。

您可以在绑定值时添加一个条件来显示什么

{{ dataItem.key === 'message' ? dataItem.value: ' '}}

还有其他方法...我想您现在可以弄清楚发生了什么以及需要根据您的要求完成什么。

无法使用 Angular 中的键值对和 firebase 访问内部对象

can't reach inner inner object using keyvalue pair in Angular with firebase

javascript

key-value

firebase

angular