javascript - 无法使用带有firebase的Angular中的键值对到达内部内部对象
问题描述
我有一个 json 对象,它有一个名为 data 的内部对象,它有 data: {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…</ng-template>
</div>
当我做 {{dataItem?.value?.message}} 我什么也没得到。当我执行 dataItem.value 时,我得到了计数和消息的值。
我只需要消息中的值。我究竟做错了什么??
解决方案
使用对象上的键值管道,它将 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: ' '}}
还有其他方法...我认为您现在可以弄清楚发生了什么以及根据您的要求需要做什么。
推荐阅读
- hyperledger-fabric - 中间 CA 不创建 tls-cert.pem
- python - 在同一个类中使用另一个函数的输出
- node.js - 更新矩阵中的元素,该矩阵是嵌套在另一个文档中的文档的字段
- postgresql - Postgres 中的共享扫描
- reactjs - 更改文本输入中的字体大小根据屏幕大小做出本机反应
- javascript - Webpack 外部反应导致 React Hooks 错误
- javascript - 函数中的最小值 40 和最大值 60。我该如何解决?
- python - 访问 WebElement 对象内容的方法有哪些?
- node.js - dpkg 被中断,您必须手动运行 'sudo dpkg --configure -a' 来纠正问题
- python - 需要在 Python 上从 Telegram 下载语音消息