Angular 4：模型更改后视图没有更新？

Question

我的应用程序中有两个，component即：HeaderComponent& TestComponent。中HeaderComponent，有一个方法名称setUserData()。我从file 中的TestComponent 方法调用setUserDate()。ansSubmit()test.component.ts

现在setUserDate()正在召唤，价值正在进入setUserDate()方法。

问题是：调用时setUserDate()，我将分值设置为this.userData.score，并且this.userData.score值在视图（ HTML ）中绑定，但来自 TestComponent 的方法 ansSubmit() 的传入值不会在查看但该值存在于ts文件中（我正在控制台中打印）。

这是代码：

测试.组件.ts：

import { HeaderComponent } from '../../components/header/header.component';
@Component({
  selector: 'test-page',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  providers: [HeaderComponent]
})

export class TestComponent implements OnInit {
  private userData: any = {};

  constructor(private _router: Router, private headerComponent: HeaderComponent) { }

  ansSubmit() {
    const logged_in_user = new LocalStorage(environment.localStorageKeys.ADMIN);
    this.userData = logged_in_user.value;
    this.userData['score'] = parseInt(this.userData.score) + 54321 

    this.headerComponent.getUserData(this.userData['score']); // Calling HeaderComponent's method  value is 54321.
  }
}

测试.组件.html：

 <div class="col-2">
     <button (click)="ansSubmit()" >
          <div>Submit Answer</div>
      </button>
</div>

header.component.ts：

import {
  Component, OnInit, ChangeDetectorRef, NgZone, ApplicationRef, ChangeDetectionStrategy
} from '@angular/core';


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],

})

export class HeaderComponent implements OnInit {
    public userData : any = {
      score:2000,
   };

  getUserData(score) { // score= 54321  ( value is coming )  
       this.userData.score = score ;
       console.log(this.userData.score);  // in this.userData.score = 54321  ( Value is assigning )
     } 
  }
}

header.component.html：

<span class="topbar-details">
            Scrore : {{userData.score }}  // actual problem is here, Its not updating value. Its only showing 2000.
</span>

请建议我如何解决这个问题。提前致谢。

Answer 1

我相信您陷入困境的原因是因为您似乎有同级组件试图操纵数据，但其中没有一个真正是数据的所有者。Angular 尝试强制执行单向数据流，这意味着数据从父级流向子级，而不是从子级流向父级。解决问题的最简单方法是让父组件“拥有” userData ，子组件绑定到数据以显示它并发出事件来操作它。

以您的场景为例：

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public userData: any = {
    score: 2000
};

 updateScore(score: number): void {
   this.userData.score += score;
 }
}

应用程序组件.html

<app-header [score]="userData.score"></app-header>
<app-test (onScoreChange)="updateScore($event)"></app-test>

header.component.ts

从 '@angular/core' 导入 { Component, OnInit, Input };

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @Input('score') score: number;

  constructor() { }

  ngOnInit() {
  }

}

header.component.html

<span class="topbar-details">
  Scrore : {{score}}
</span>

测试组件.ts

从 '@angular/core' 导入 { Component, OnInit, Output, EventEmitter };

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  @Output('onScoreChange') onScoreChange = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  ansSubmit() {
    this.onScoreChange.emit(54321);
  }
}

测试.component.html

<div class="col-2">
  <button (click)="ansSubmit()" >
    <div>Submit Answer</div>
  </button>
</div>

注意：就从本地存储加载用户信息而言，我将使用一个服务来处理它。用户数据加载的位置和方式并不是显示和操作数据的组件真正关心的问题。将该逻辑转移到具有正确接口的服务（如果数据可能来自远程位置，则可能返回可观察值）将允许您无缝地将基于本地存储的服务替换为基于 HTTP 的服务，以强制传输所有分数无需更改组件中的一行代码即可与服务器进行交互。它还允许您交换模拟服务来进行测试，因此不需要为本地存储播种即可通过测试（即，您的测试必须对要通过的组件的实现了解较少，因此它们将在实施更改时不会那么脆弱）