Angular mat-badge плохо работает с динамическими c данными - PullRequest
Новая
       15

Angular mat-badge плохо работает с динамическими c данными

0 голосов
/ 06 апреля 2020

Мне нужно три фишки на одной строке. числа, которые отображаются в чипе, взяты из объекта json. Я пробовал использовать как материальные значки, так и фишки. Для значков я могу отображать данные, но значок ведет себя странно, когда мой номер больше 6 цифр. Что касается чипов, я не могу понять, как связать данные. Вот мой код для значков

ts файл 


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

html file 

<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>

s css file 


.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;
}

Я перепробовал много вещей, чтобы связать чипы, но ничего не работает, и нет ничего полезного в Интернете.

1 Ответ

0 голосов
/ 08 апреля 2020

В итоге я использовал чипы. Я был в состоянии ввести данные, я делал это неправильно. Вот мой код для фишек. Каждый чип содержит значок, который содержит мои данные (цифры) 

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 file 


$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;
  }
}
...