Question

我有，我想到的，一个非常基本和简单的对象，我获取通过 Rx 并希望显示一部分在屏幕上。

我修剪了所有HTML并简单地放下了{{ structure$ | async | json }}，structure$是我的组件中Observable的名称，定义如下：

structure$: Observable<Array<Object>>;

显示以下内容：

{ 
  "navbar": [ 
   { "id": 5, "label": … , "order": 1 },
   { "id": 4, "label": … , "order": 2 }, 
   { "id": 6, "label": … , "order": 3 } ], 
  "sidebar": [
   { "id": 2, "label": … , "order": 1 },
   { "id": 1, "label": … , "order": 3 } ]
 }

现在我想要实现的是显示navbar。但是，此{{ structure$.navbar | async | json }}不会呈现任何内容，{{ structure$.navbar | async }}或{{ structure$.['navbar'] | async | json }}甚至{{ structure$.['navbar'] | async | json }}也不会呈现。

最终我想要实现的是导航栏上的一个简单的*ngFor，就像这样（当然也没有工作）：

<ul>
  <li *ngFor="let item of structure$.navbar | async">
    {{item}}
  </li>
</ul>

有关为何发生这种情况的任何想法？

Answer 1

你只是没有以正确的方式使用括号。您首先要获取异步值，然后访问其属性：

*ngFor="let item of (structure$ | async).navbar"

然后，如果您想打印navbar，您可以使用：

{{ (structure$ | async).navbar | json }}

尝试通过异步从Observable中的Object访问键会产生错误

1 个答案: