Question

这是一个Angular项目，我有来自服务器的数据。我正在创建三个列表。我有三种类型的情感，每种情感都有一个描述

for (const sentiment of this.dataSource.allFavourabilities) {
  if (sentiment.sentiment === 'Positive') {
    this.positiveList.push(sentiment);
  }

  if (sentiment.sentiment === 'Negative') {
    this.negativeList.push(sentiment);
  }

  if (sentiment.sentiment === 'Neutral') {
    this.neutralList.push(sentiment);
  }
}

这就是我进行console.log记录时的样子。

coverageId:137
description:"Positive"
id:119
sentiment:"Positive"

在HTML中，我将其分为三个div列出，唯一的常数是显示为图标的情感，描述可能有所不同。但是客户主要输入肯定，否定或中性的信息，因此我得到了一个包含相同数据的丑陋清单。我想对其进行过滤，以便它是描述中的匹配字符串，并且我对描述的判断是肯定的，例如50次，在我的HTML中应该说

首选结果：

positive(50)
negative(2)
neutral

而不是

positive
positive
positive
positive etc.
negative
negative
neutral

这是我的HTML：

<div class="form-item favourability-wrapper flex">
      <div class="column" *ngIf="positiveList">
        <div class="sentiment-label">Positive</div>
        <ng-container *ngFor="let a of positiveList">
          <div class="sentiment sentiment-positive ">
            <i class="fas fa-smile"></i>
            <div class="description">{{ a.description }}</div>
          </div>
        </ng-container>
      </div>
      <div class="column" *ngIf="negativeList">
        <div class="sentiment-label">Negative</div>
        <ng-container *ngFor="let b of negativeList">
          <div class="sentiment sentiment-neutral">
            <i class="fas fa-meh"></i>
            <div class="description">{{ b.description }}</div>
          </div>
        </ng-container>
      </div>
      <div class="column" *ngIf="neutralList">
        <div class="sentiment-label">Neutral</div>
        <ng-container *ngFor="let c of neutralList">
          <div class="sentiment sentiment-negative">
            <i class="fas fa-frown"></i>
            <div class="description">{{ c.description }}</div>
          </div>
        </ng-container>
      </div>
    </div>

Answer 1

将其更改为显示长度的html元素

<ng-container *ngFor="let a of positiveList">
          <div class="sentiment sentiment-positive ">
            <i class="fas fa-smile"></i>
            <div class="description">{{ a.description }}</div>
          </div>
</ng-container>

到

<div *ngIf="positiveList">
    {{ '(' + (positiveList?.length || '0')+')' }}
</div>

Answer 2

<div class="form-item favourability-wrapper flex">
    <div class="column" *ngIf="positiveList">
        <div class="sentiment-label">Positive{{ positiveList.length ? '(' + positiveList.length + ')' : '' }}</div>
    </div>
    <div class="column" *ngIf="negativeList">
        <div class="sentiment-label">Negative{{ negativeList.length ? '(' + negativeList.length + ')' : '' }}</div>
    </div>
    <div class="column" *ngIf="neutralList">
        <div class="sentiment-label">Neutral{{ neutralList.length ? '(' + neutralList.length + ')' : '' }}</div>
    </div>
</div>

也许这对您有用，您可以使用Array.length来获取计数。

Answer 3

您可以尝试以下方法：

<div class="form-item favourability-wrapper flex">
    <div class="column" *ngIf="positiveList">
        <div class="sentiment-label">Positive</div>
        <div class="sentiment sentiment-positive ">
            <i class="fas fa-smile"></i>
            <div class="description">({{ positiveList.length > 0 ? positiveList.length : '0' }})</div>
        </div>
    </div>
    <div class="column" *ngIf="neutralList">
        <div class="sentiment-label">Neutral</div>
        <div class="sentiment sentiment-neutral">
            <i class="fas fa-meh"></i>
            <div class="description">({{ neutralList.length > 0 ? neutralList.length : '0' }})</div>
        </div>
    </div>
    <div class="column" *ngIf="negativeList">
        <div class="sentiment-label">Negative</div>
        <div class="sentiment sentiment-negative">
            <i class="fas fa-frown"></i>
            <div class="description">({{ negativeList.length > 0 ? negativeList.length : '0' }})</div>
        </div>
    </div>
</div>

Answer 4

因为您正在寻求帮助，所以让我帮助您改善代码：

this.feelings = [
  { name: 'Positive', sentiments : [] },
  { name: 'Negative', sentiments : [] },
  { name: 'Neutral', sentiments : [] },
];

for (const sentiment of this.dataSource.allFavourabilities) {
  if (sentiment.sentiment === 'Positive') {
    this.feelings[0].sentiments.push(sentiment);
  }

  if (sentiment.sentiment === 'Negative') {
    this.feelings[1].sentiments.push(sentiment);
  }

  if (sentiment.sentiment === 'Neutral') {
    this.feelings[2].sentiments.push(sentiment);
  }
}

<!-- I'll let you append the classes to your convenience -->
<div *ngFor="let feeling of feelings">
  {{ feeling.name }} : {{ feeling.sentiments.length }}
</div>

看看HTML是如何减少的？我们甚至可以进一步减少打字稿

this.feelings: { name: string, sentiments : any[] }[] = this.dataSource.allFavourabilities
  .reduce((p, n) => {
    if (!p.find(feeling => feeling.name === n.sentiment)) { 
      p.push({ name: n.sentiment, sentiments : []}); 
    }
    p.find(feeling => feeling.name === n.sentiment).sentiments.push(n);
    return p;
  }, []);

将相同的字符串分组为数组并计数

4 个答案: