角2模板的更新，但破單擊處理

Question

我有一個應用程序，使用單一類型的對象的交易。我使用服務管理對象的狀態。在一個組件中，我顯示該對象。從這裏你可以點擊字段在另一個組件中編輯它們。您也可以點擊按鈕將新項目添加到字段並刪除項目。

大部分能正常工作，但有時它打破沒有任何錯誤消息的時間。我點擊刪除或編輯按鈕或字段，沒有任何反應。點擊處理程序已損壞（我已在控制檯中檢查過）。這通常發生在我添加或從數組中刪除後。

，因爲當我加我使用HTTP，以確保它被保存到數據庫中，然後返回後，才觀察到的新的液滴做一個元素，我讓角更新顯示，這是非常令人困惑。顯示屏始終更新。然而，有時顯示更新，但Augury沒有意識到，這很奇怪。因此，我會添加一個提示，例如，提示將在數據庫中可見，返回並更新視圖，但Augury不會在組件中看到它。

它也不一致。有時候工作很好。

這裏是從視圖一些示例代碼。

<h4>Hints (optional)</h4> 
<button class="btn btn-sm" [routerLink]="['/create/create5']">Add New</button> 
<div *ngIf="droplet.hints.length < 1">None</div> 
<div class="row" *ngFor="let hint of droplet.hints; let i=index"> 
    <div class="hint col-md-10" (click)="selectHint(i)"> 
    <span [innerHTML]="hint.content || empty"></span> 
    <span (click)="removeElement(i, 'hint')" class="pull-right glyphicon glyphicon-remove" aria-hidden="true"></span> 
    </div> 
</div> 

<h4>Tags 
    <div class="progress-marker" [class.complete]="droplet.tags.length > 0"></div> 
    <div class="progress-marker" [class.complete]="droplet.tags.length > 1"></div> 
    <div class="progress-marker" [class.complete]="droplet.tags.length > 2"></div> 
</h4> 
<button class="btn btn-sm" [routerLink]="['/create/create6']">Add New</button> 
<div *ngIf="droplet.tags.length < 1">None</div> 
<br> 
<button *ngFor="let tag of droplet.tags; let i=index" type="button" class="btn btn-default btn-sm" (click)="removeElement(i, 'tag')"> 
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> {{ tag.tag }} 
</button> 

有幾場這樣的，但一般與* ngIf的那些是造成問題的人。正如我說，如果我添加或刪除或編輯數組中它的作品的元素，模板更新，但往往沒有在陣列後工作正常（雖然非陣列正常工作）。

相關組件的代碼如下所示：

import { Component, OnInit } from '@angular/core'; 
import { Droplet } from '../droplet'; 
import { DropletService } from '../droplet.service'; 
import { Router } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx'; 
import { HttpService } from '../http.service'; 

export class ShowDropletComponent implements OnInit { 
    droplet: Droplet; 

    constructor(
    private dropletService: DropletService, 
    private router: Router, 
    private httpService: HttpService 
) { } 

    ngOnInit() { 
    this.droplet = this.dropletService.getCurrentDroplet(); 
    this.dropletService.pushedDroplet.subscribe(
     droplet => this.droplet = droplet 
    ) 
    } 

    //using dummy to ensure element not updated unless returned from server 
    removeElement(index, element) { 
    console.log("remove clicked"); 
    let dummy = this.droplet; 
    if (element === "explanation") { 
     this.router.navigate(['create/create3']); 
     dummy.explanations.splice(index, 1); 
    } else if (element === "question") { 
     this.router.navigate(['create/create4']); 
     dummy.questions.splice(index, 1); 
    } else if (element === "hint") { 
     this.router.navigate(['create/create5']); 
     dummy.hints.splice(index, 1); 
    } else if (element === "tag") { 
     dummy.tags.splice(index, 1); 
    } 
    this.httpService.saveDroplet(dummy) 
     .subscribe(
     (droplet: Droplet) => { 
      this.dropletService.updateCurrentDroplet(droplet); 
     } 
    ); 
    } 

    editThis(field) { 
    if (field === "description") { 
     this.router.navigate(['create/create2']); 
    } else if (field === "name") { 
     this.router.navigate(['create/create1']); 
    } 
    } 

    selectExplanation(index) { 
    console.log("select exp clicked"); 
    this.router.navigate(['create/create3', index]); 
    } 

    selectQuestion(index) { 
    console.log("rselect q clicked"); 
    this.router.navigate(['create/create4', index]); 
    } 

    selectHint(index) { 
    console.log("select hint clicked"); 
    this.router.navigate(['create/create5', index]); 
    } 

} 

我的猜測是，它的東西做的* ngFor更新在視圖中的數組，但無論是指數不正確更新或點擊處理程序打破，但不僅僅是模板的特定部分。我很茫然。

Answer 1

當在*ngFor指令操作的項目，它添加一個trackBy函數返回一個唯一索引是很重要的 - 所以刪除/添加項目時，該指令可以跟蹤他們財產。

假設你tag.tag是獨一無二的，你可以寫你的*ngFor這樣，而不是：

<button *ngFor="let tag of droplet.tags; let i=index; trackBy: tag.tag" type="button"... 

Answer 2

這個問題的解決很奇怪。我有左側編輯窗體和右側正在編輯或創建的液滴的並排組件。您可以點擊右側的按鈕或字段，並在左側顯示相應的表單進行編輯。問題是，如果顯示的液滴的字段在左側的組件右下方延伸，則點擊將失效，瀏覽器將簡單地滾動到屏幕的頂部。我不知道爲什麼發生這種情況，但是在同一個視口內強制這一切解決了問題。