Question

我最近开始使用angular，并且尝试将列表按类型分为两部分，并在两个单独的字段中进行显示。我的问题是：我可以通过在.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”标记：

Rank       1    2    3    5
Group                      
A     0    m  NaN  NaN  NaN
B     0    n    o    u  NaN
      1  NaN    t  NaN  NaN
C     0  NaN  NaN    p  NaN
D     0    s  NaN  NaN    q
      1  NaN  NaN  NaN    v
E     0    r  NaN  NaN  NaN

希望这会有所帮助。

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变量（不必用括号来称呼它们！）。

如何按角度分开列表？

2 个答案: