* ngFor行为

Question

我有一个带有* ngFor的列表

 <div class="items" *ngFor="let infection of missionData?.infections">
    <span class="name">{{infection.name}}, {{infection.state}}</span>
    <span class="device-status" *ngIf="infection.state">
      <app-svg-icon [name]="infection.state" [size]="18"></app-svg- 
         icon>
    </span>

一切正常，但是当新感染（通过websocket）添加到列表中时，其余感染的所有图标都更改为与上一个感染相同，即使我看到状态相同照原样。

这是我的应用程序svg，我认为问题是：

import { Component, HostBinding, Input, OnChanges, OnInit, 
SimpleChange, ViewEncapsulation } from '@angular/core';
import { IconService } from '@app/services';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'app-svg-icon',
template: ``,
styles: [`app-svg-icon {
display: inline-block;
 }`],
encapsulation: ViewEncapsulation.None
})
export class SvgIconComponent implements OnInit, OnChanges {
  @HostBinding('innerHtml') inner;
  @Input() name: string;
  @Input() size: number;
  mobWidth: any;
  svgData = '';
  constructor(private sanitizer: DomSanitizer, private iconService: IconService) {
    this.mobWidth = (window.screen.width);
   }

  ngOnInit() {
    if (this.name) {
      this.setSVG();
    }
  }

  ngOnChanges(changes: { [key: string]: SimpleChange }) {
    for (const change in changes) {
      if (!changes[change].firstChange) {
        if (changes[change].previousValue !== changes[change].currentValue) {
          this[change] = changes[change].currentValue;
          if (change === 'name' || change === 'size') {
            this.setSVG();
          }
        }
      }
    }
  }

  private setSVG() {
    this.svgData = this.iconService.getIcon(this.name, this.size);
    this.inner = this.sanitizer.bypassSecurityTrustHtml(this.svgData);
  }
}

Answer 1

这是因为在添加新感染时会触发ngOnChanges，并且函数中的for会针对所有感染调用setSVG，但是setSVG正在使用getIcon获取相同的图片。您拥有上一次感染的数据的名称和大小。 您需要修复ngOnChanges函数。使用isFirstChange（）方法检查新值是否是分配的第一个值。