При изменении значения директивы @Input внутри блока подписки в родительском компоненте изменения не обнаруживаются в дочернем компоненте.

Я согласен с ответом от zacherates.

Но вы можете сделать вызов intern () в ваших нелиберальных строках.

Из примера zacherates:

// ... but they are not the same object
new String("test") == "test" ==> false 

Если вы ставите нелитеральное равенство строки, это правда

new String("test").intern() == "test" ==> true 
0
задан Prashant Pimpale 17 January 2019 в 11:49
поделиться

2 ответа

Как я тестировал в StackBlitz, он работает нормально для меня, взгляните на:

Parent Component HTML:

<h1>PARENT</h1>
<button (click)="buttonClicked()">NEXT</button>
<app-child  [inputChildVar]="parentValue"></app-child>

Parent Component TS:

import { Component } from '@angular/core';
import { DataService } from './data.service';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
  providers: [DataService]
})
export class FormFieldOverviewExample {

  constructor(private service: DataService) {

  }
  parentValue = {
    "userId": 112,
    "id": 1121,
    "title": "masxsat",
    "body": "teasdas"
  }
  buttonClicked() {
    this.service.getData()
    this.service.data.subscribe(value => {
      console.log(value)
      this.parentValue = value;
    })
  }
}

Child Component HTML:

<h1>Child</h1>
<div>
{{inputChildVar | json}}
</div>

Child Component TS:

import { Component, OnInit, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() inputChildVar

  constructor() { }
  ngOnChanges() {
    console.log(this.inputChildVar)
  }
  ngOnInit() { }
}

Data.Service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

  data = new BehaviorSubject(null)

  constructor(
    private http: HttpClient
  ) { }


  getData() {
    this.get()
      .then(response => {
        this.data.next(response);
      })
  }

  get(): Promise<any> {
    const url = `https://jsonplaceholder.typicode.com/posts/1`;
    return this.http.get(url)
      .toPromise()
      .catch(this.handleError);
  }

  // handler for error in URL
  private handleError(error: any): Promise<any> {
    return Promise.reject(error.message || error);
  }
}

StackBlitz [1111 ]

0
ответ дан Prashant Pimpale 17 January 2019 в 11:49
поделиться

Мне удалось решить проблему, запустив обнаружение изменений с помощью changeDetectorRef. Теперь это работает. Получил ссылку из: Angular 2 - Вид не обновляется после изменения модели

0
ответ дан Ankita S 17 January 2019 в 11:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: