Angular mat-badge 不适用于动态数据答案

【问题标题】：Angular mat-badge doesn't work well for dynamic dataAngular mat-badge 不适用于动态数据
【发布时间】：2020-04-06 17:26:59
【问题描述】：

我需要三个芯片在一条线上。芯片中重新显示的数字来自 json 对象。我试过同时使用材料徽章和芯片。对于徽章，我可以显示数据，但是当我的号码大于 6 位时，徽章的行为会很奇怪。对于芯片，我不知道如何绑定数据。这是我的徽章代码

ts 文件


  getTotalBatches(jobs: Job[]): number {
    return jobs.reduce((acc, job) => acc + job.batchCount, 0)
  }

html文件

<p>
      <span [matBadge]="getTotalBatches(jobs)" matBadgeOverlap="true" matBadgeColor="warn" matBadgePosition="below after"><span
        class="badgeText1">Batches</span></span>

      <span [matBadge]="getTotalReports(jobs)" matBadgeOverlap="true" matBadgeColor="warn" matBadgePosition="below after"><span
        class="badgeText">Reports</span></span>
      <span [matBadge]="getTotalRecords(jobs)" matBadgeOverlap="true" matBadgeColor="warn" matBadgePosition="below after"><span
        class="badgeText"> Records</span></span>
    </p>

scss 文件


.mat-badge-content {
  width: auto;
  min-width: 30px;
  min-height: 30px;
  display: grid;
  text-align: center;
  align-items: center;

}

.badgeText {
  padding-right: 40px;
  padding-left: 35px;

}

.badgeText1 {
  padding-right: 40px;

}

.mat-badge-medium.mat-badge-below .mat-badge-content {
  top: 20px;
}

我尝试了很多方法来绑定芯片，但没有任何效果，网上也没有什么有用的。

【问题讨论】：

标签： angular badge

【解决方案1】：

我最终使用了筹码。我能够注入数据，但我做错了。这是我的芯片代码。每个芯片都包含一个包含我的数据（数字）的图标

html file
<div>
      <div class="md-chips">
        <div class="md-chip">
          <div class="md-chip-icon"> {{getTotalBatches(jobs)| number}}</div>
          Batches
           </div>
        <div class="md-chip">
            <div class="md-chip-icon"> {{getTotalReports(jobs) | number }}</div>
            Reports:
         </div>
          <div class="md-chip">
            <div class="md-chip-icon"> {{getTotalRecords(jobs) | number }}</div>
            Records:
          </div>

css文件


$md-chip-height: 32px;
$md-chip-color: #e0e0e0;

.md-chip {
  display: inline-block;
  background: $md-chip-color;
  padding: 0 12px;
  border-radius: 32px;
  font-size: 13px;
  &.md-chip-hover:hover {
    background: #ccc;
  }
}


.md-chip, .md-chip-icon {
  height: $md-chip-height;
  line-height: $md-chip-height;
}

.md-chip-icon {
  display: block;
  float: left;
  background: #e60028;
  width: $md-chip-height;
  border-radius: 50%;
  text-align: center;
  color: white;
  margin: 0 8px 0 -12px;

}

.md-chips {
  padding: 12px 0;
  .md-chip {
    margin: 0 5px 3px 0;
  }
}

【讨论】：