如何按角度分类列表？

Question

我最近开始使用角度曲线，我试图将一个列表分成两个类型，并将它显示在两个独立的字段中。我的问题是：我可以通过在.ts文件中执行for循环来实现它，还是有一种更简单的方法？

HTML文件：

      <div class="ml-xs mr-xs my-flex-column">
        <p>Interests:</p>
        <ul style="list-style-type:disc;" *ngFor="let interests of item.profileInterest">
          <li> {{ interests.name }} </li>
        </ul>
      </div>
      <div class="ml-xs mr-xs my-flex-column">
        <p>Behaviors:</p>
        <ul style="list-style-type:disc;" *ngFor="let behaviors of item.profileInterest">
          <li> {{ behaviors.name }} </li>
        </ul>
      </div>

.ts文件：

public getCustomerProfile() {
    this.blockUI.start("Loading");
    this._service.getCustomerProfile(this.id)
      .subscribe(
        (data: RequestCustomerProfile[]) => {
          if (data.length && data.length > 0) {
            this.entityProfile = data;
          } else {
            this.entityProfile = [];
          }
          this.blockUI.stop();
        },
        error => {
          console.log(error)
          this.blockUI.stop();
        }
      );
  }

Answer 1

一种方法是直接处理HTML文件，只需处理它并检查“li”标签：

<div class="ml-xs mr-xs my-flex-column">
<p>Interest:</p>
<ul *ngFor="let interests of item.profileInterest">
    <li *ngIf="interests.type == 'Interest'"> {{ interests.name }} </li>
</ul>
</div>

<div class="ml-xs mr-xs my-flex-column">
<p>Behavior:</p>
<ul *ngFor="let behaviors of item.profileInterest">
    <li *ngIf="behaviors.type == 'Behavior'"> {{ behaviors.name }} </li>
</ul>
</div>

希望这可以帮助。

Answer 2

要在.ts文件中执行此操作，您可以执行以下操作：

get interests() {
  return item.profileInterests.filter(interest => interest.type === 'Interest');
}


get behaviours() {
  return item.profileInterests.filter(interest => interest.type === 'Behaviour');
}

（注意我不知道item.profileInterests的结构，这只是猜测）

然后在html中你可以像这样使用它们：

  <div class="ml-xs mr-xs my-flex-column">
    <p>Interests:</p>
    <ul style="list-style-type:disc;" *ngFor="let interest of interests">
      <li> {{ interest.name }} </li>
    </ul>
  </div>
  <div class="ml-xs mr-xs my-flex-column">
    <p>Behaviors:</p>
    <ul style="list-style-type:disc;" *ngFor="let behavior of behaviors">
      <li> {{ behavior.name }} </li>
    </ul>
  </div>

这种方式当你想要别处的行为和兴趣时，你可以使用那些getter变量（你不需要用括号调用它们！）。