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中更新

回答

相关问题