Angular 4 * ng如何将对象作为键值循环?

时间:2017-11-14 17:29:28

标签: angular ngfor

我有以下数据:data

data = {
  "dateFilters": {},
  "search_param": "",
  "search_term": "",
  "workType": ["Part Time", "Full Time"],
  "company.name": ["Company A", "Company B"]
};

我想遍历此对象并检查密钥是否不是dateFilters, search_param, and search_term,然后循环该密钥并打印其值。 我想要这样的事情:

<span>workType
  <a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
    <span class="wb-inv"></span>Part Time<span class="fa fa-times" aria-hidden="true"></span>
  </a>
  <a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
    <span class="wb-inv"></span>Full Time<span class="fa fa-times" aria-hidden="true"></span>
  </a>   
</span>

<span>company.name
  <a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
    <span class="wb-inv"></span>Company A<span class="fa fa-times" aria-hidden="true"></span>
  </a>
  <a class="btn btn-link btn-xs btn-keyword mrgn-tp-sm">
    <span class="wb-inv"></span>Company B<span class="fa fa-times" aria-hidden="true"></span>
  </a>   
</span>

我目前的代码是这样的并且有效:

<ng-container *ngIf="data?.workType">
  <a *ngFor="let workType of data?.workType" (click)="removeWorkTypeAndSearch()" class="btn btn-link btn-xs btn-keyword mrgn-tp-sm"><span class="wb-inv">Remove keyword &nbsp;</span>{{ workType }}<span class="fa fa-times" aria-hidden="true"></span></a>
</ng-container>
<ng-container *ngIf="data?.functionalArea">
  <a *ngFor="let functionalArea of data?.functionalArea" (click)="removeWorkTypeAndSearch()" class="btn btn-link btn-xs btn-keyword mrgn-tp-sm"><span class="wb-inv">Remove keyword &nbsp;</span>{{ functionalArea }}<span class="fa fa-times" aria-hidden="true"></span></a>
</ng-container>

但是我希望有一个动态部分,并且不需要为每个键都有单独的循环,因为data对象有很多需要这个循环的键。

注意:data元素是动态的,它们可能存在或不存在,我不应该通过data.key进行检查,因为它对我来说是未知的,它是动态添加的,它们可能是很多其他元素密钥。

0 个答案:

没有答案