角度-计算ngFor中元素的总宽度

Question

我有一个类似的界面：

export class FooComponent implements OnInit {
.
.
.
  filters = [
    new FilterType(0, `a`, false),
    new FilterType(1, `b`, false),
  ];

  trackByFunction(index, item) {
     if (!item) {
     return null;
     }
    return index.priority;
  }

  totalWidth = 0;
  widthCalculator(element) {
    console.log(element.innerText);
    this.totalWidth += element.offsetWidth;
    console.log("juliet function height = " + this.totalWidth);
  }
.
.
}

这是我的组件：

ngFor

可以在HTML内找到 <button *ngFor="let filter of filters; trackBy:trackByFunction" #juliet [ngClass]="widthCalculator(juliet)" class="filter__button"> {{ filter.name }} </button> ：

var tokenData = JSON.parse(localStorage.getItem('token'));
console.log(tokenData.access_token);

结果如下：

尽管只有两个按钮，但我希​​望总和为96。 为什么ngFor不止一次地迭代它们，又如何避免？

有没有建议获得总宽度？