Angular2：在渲染時調用兩次的函數

而且沒有意識到，這個函數在每次迭代中被調用兩次。

public setLevel(deviceId: string, averageFps: number): void { 
    let device = `device-${deviceId}`; 

    // (<HTMLElement>document.querySelector(`#${device} .level-fps-wrapper .level-fps`)).style.width = `${averageFps/300 * 100}%`; 
    console.log(device); 
}

下面是HTML模板

<div class="container"> 
<div class="row"> 
    <h1 class="header">Devices</h1> 
    <div class="col l4 m6 s12 clickable" *ngFor="let device of this.devices" (click)="goToDevice(device)"> 
     <div class="card" [id]="'device-' + device.device._id"> 
      <div class="card-content"> 
       <div class="row no-margin-bottom"> 
        <div class="col s2"> 
         <img class="circle circle-element" [src]="'./app/devices/images/' + device.device.os + '_logo.png'" alt=""> 
        </div> 
        <div class="col s10"> 
         <span class="card-title">{{ device.device.name }}</span> 
         <p> 
          {{ device.averageFps | number: '.1-2' }} fps 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="card-action level-fps-wrapper"> 
       <div class="level-fps">{{ this.setLevel(device.device._id, device.averageFps) }}</div> 
      </div> 
     </div> 
    </div> 
</div>

這是輸出

它應該是3行，而不是6.

有人可以給我解釋一下嗎？有沒有什麼與角度生命週期掛鉤？

感謝您的回答！

來源

2017-08-10 Yoann Picquenot

Angular將重新綁定每個更改循環上的所有綁定。這經常發生，並且在開發人員模式下會發生兩次，因爲它在運行第一個循環後再次運行一個循環，以確保在變更循環內部沒有更改變量。我不建議在這些類型的綁定中放置任何邏輯，而是使用它們來簡單地反映變量的狀態，而您的邏輯發生在代碼中的其他位置。 https://stackoverflow.com/questions/34465301/in-angular2-why-are-there-2-times-check-for-content-and-view-after-settimeout – LarsMonty

是的，這很平常。類似於角1，角度無法判斷函數的結果是否會發生變化，因此它會在每個摘要循環中調用它。

來源

2017-08-10 17:37:35 Sajeetharan

Angular2：在渲染時調用兩次的函數

回答

相關問題