更新 - 已解决

Question

我有以下名为Enumeration的类：

export class Enumeration {
    name: string;
    values: Object;
}

现在在我的组件中，我创建了我的对象并填充了数据。

在他的模板中，我有类似的东西：

<div class="card-item-content">
  <span>{{enumeration | json}}</span>
</div>

这是正常的，我可以看到：

{ "name": "employee-type", "values": [ null, { "id": 1, "text": "Employee" }, { "id": 2, "text": "Contractor" }, { "id": 3, "text": "Newjoiner" }, null, { "id": 5, "text": "Consultant" }, { "id": 6, "text": "GCP" }, { "id": 7, "text": "Career Counselor" } ] }

但是当我尝试

时

{{enumeration.name | json}} or {{enumeration.values | json}}

我收到此错误消息：

Cannot read property 'name' of undefined

当我这样做时：

*ngFor="let enum of enumeration.values"

它将循环8次，但第一个跨度为空，然后用

进行3次

[object Object]

然后是另一个空跨度，然后是之前的3次。

关键是我要访问 values 对象属性，属性 text 和 id 中的每个 not null对象EM>

所以结果应该是6个跨度与此内容员工1 承包商2 Newjoiner 3 顾问5 GCP 6 职业顾问7

请问有人给我一些提示吗？

更新 - 已解决

所以我只在模板中这样做。

<ng-container *ngFor="let enum of enumeration?.values"> <span *ngIf="enum">{{enum?.text}} : {{enum?.id}}</option> </ng-container>

实际上它很简单，但我在2天内苦苦挣扎。感谢帮助。

过滤器在我的情况下不起作用。不知道为什么。这是我的ngOnInit：

ngOnInit() { if (this.id != null) { const enumName = employeeDetailsEnumMapping.get(this.id); this.enumsService.getEnums().subscribe(data => { this.enumeration = data.get(enumName); if (this.enumeration == null) { console.error(`missing enum ${this.id}`); } }); } }

当我补充说：

this.enumeration.values = this.enumeration.values.filter(x => x != null);

它说：

'filter' property does not exist on type 'Object';

但非常感谢你们所有人。它帮助我解决了这个问题。但实际上我认为过滤方式看起来会更好。

Answer 1

我想你想要的是从数组中删除所有null值，以便你可以正确访问数组中的对象，所以你可以在你的订阅中这样做：

.subscribe(data => {
  this.enumeration = data;
  this.enumeration.values = this.enumeration.values.filter(x => x != null);        
})

然后您的迭代应该可以正常工作，使用安全导航操作符来保护null值（如果这是异步的）

<div *ngFor="let enum of enumeration?.values">
  {{enum.text}}
</div>

Demo

Answer 2

{{(enumeration | json)?.name}}

首先获取json，然后尝试进入变量。它有效吗？

Answer 3

json对象应该被{}或[]括起来。

{{enumeration.name | json}} or {{enumeration.values | json}}

不是有效的json，因此结果为undefined。

从组件传递的角度访问对象

更新 - 已解决

3 个答案:

Demo