angular2 - ngIf值未在DOM中更新

我目前正在更新DOM中的值時遇到問題。angular2 - ngIf值未在DOM中更新

爲了快速解釋並儘可能簡單，我目前有兩個組件（A和B）。 B，從A繼承，用A的視圖作爲模板，而且注入其模板到A（NG-內容），因此B的觀點是這樣的：

<A> 
    <template> 
     <div *ngFor="let item of items" (click)="selected($event, item)"> 
      <span>{{item.name}}<span> 
     </div> 
    </template> 
</A>

和A的觀點是這樣的：

<ng-content select="template"></ng-content> 
<div *ngIf="searching">Hey I'm looking for answer</div> 
<div *ngIf="!searching">I already have my answer</div>

組件B僅一個私有變量，它是項目的數組和A的分量也具有單一的B稱爲具體方法是：

private searching: boolean = true; 

selected(event, value: any): void { 
    event.stopPropagation(); 
    this.searching = false; // This.searching is updated in component but not in DOM 
    this.selectedItem = value; // BUT this.selectedItem is updated in component AND in DOM !! 
}

更改this.selectedItem工作，但this.searching不會因此不僅是「是」由於搜索總是TRUE，因此顯示。

這裏是plunkr。

有人能夠賜教嗎？謝謝。

來源

2017-07-27 NPanda

你爲什麼使用event.stopPropagation（）; ？ – distante

你可以發佈整個html和組件代碼嗎？ –

以下是plunkr：https://plnkr.co/edit/DP7K5Q63kEqXmQbRA98I?p=preview – NPanda

按我的意見，在父類方法可以在子類中使用，因此這是可行的，不像你coded.I不知道更多關於打字稿extends和ng-content。您最好需要參考 ng-content的功能和範圍<template-example>。

import {Component, NgModule} from '@angular/core' 
    import {BrowserModule} from '@angular/platform-browser' 
    declare var searching: boolean 
    @Component({ 
     selector: 'my-app', 
     template: `<ng-content select="template-example"></ng-content>`, 
    }) 
    export class App { 
     private searching: boolean = true; 
     private selectedItem: any; 

     constructor(private zone:NgZone) { 
     } 

     selected(event, value: any) { 
     event.stopPropagation(); 


      this.searching = !this.searching; 
     console.log(this.searching); 
     this.selectedItem = value; 
     } 
    } 


    @Component({ 
     selector: 'app-inheritent', 
     template: ` 
      <my-app> 
      <template-example> 
       <div *ngFor="let item of items" (click)="selected($event, item)"> 
       <a>{{item.name}}</a> 
       </div> 
       <div *ngIf="!searching"> 
        <span>Nope.</span> 
       </div> 

       <div *ngIf="searching"> 
        <span>Yes</span> 
       </div> 
      </template-example> 
      </my-app>` , 
    }) 
    export class AppInheritent extends App { 

     private items: any = [ 
     {name: "1"}, 
     {name: "2"}, 
     {name: "3"}, 
     {name: "4"}, 
     {name: "5"}, 
     ]; 

     constructor() { 
     } 


    } 

    @NgModule({ 
     imports: [ BrowserModule ], 
     declarations: [ App, AppInheritent ], 
     bootstrap: [ AppInheritent ], 
     schemas: [ NO_ERRORS_SCHEMA ] 
    }) 
    export class AppModule {}

來源

2017-07-27 14:44:54 k11k2

對於那些誰可能會感興趣......我終於找到了答案感謝@ k11k2和@Hareesh（我終於明白你的答案）誰開導我，但是這並不完全因爲延伸。 - 謝謝。

擴展只從頭開始混淆了我的想法。在我的示例中，我實例化了組件B（app-inheritent）中的組件A（my-app）。由於延伸，我認爲組件A和B將份額相同的變量和相同的上下文，但他們絕對不。

在調用組件B中，我們已經有一個上下文並且在用A擴展後者時，這兩個組件共享相同的結構。

但是，B本身正在呼叫A，所以我們得到了另一個上下文。 A具有與B相同的結構，但它們在任何方面都沒有關係。

當我調用選定的函數時，B實際上調用了它的PARENT選擇的方法，而不是實例化的A組件的函數！

因此，正如@Hareesh所說的那樣，我們現在有多個組件。改變價值的唯一方法是讓他們相互溝通。

來源

2017-07-27 15:16:28 NPanda

angular2 - ngIf值未在DOM中更新

回答

相關問題