Я согласен с ответом от zacherates.
Но вы можете сделать вызов intern () в ваших нелиберальных строках.
Из примера zacherates:
// ... but they are not the same object
new String("test") == "test" ==> false
Если вы ставите нелитеральное равенство строки, это правда
new String("test").intern() == "test" ==> true
Как я тестировал в 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);
}
}
Мне удалось решить проблему, запустив обнаружение изменений с помощью changeDetectorRef. Теперь это работает. Получил ссылку из: Angular 2 - Вид не обновляется после изменения модели