绑定两个零件的角度为5的属性

Question

我让自己发疯，试图了解代码内部的错误。 在“ search-item-main.component”的模板中，我有两个组件：“ search-results.component”和“ item-generals.component”。

我有一个输入，该输入的文本绑定到搜索结果内部的输入属性'searchText'：当我在输入内部编写内容时，搜索结果内部的函数将调用搜索服务，而这部分工作正常。

在search-result.component内部，还具有“ selectedItem”（及其事件发射器）属性，该属性通过在搜索结果模板内部声明的按钮进行修改。

然后，我得到了第二个组件“ item-generals”，这是我遇到的问题：我试图将上述输入属性“ item”绑定到在搜索结果中定义的selectedItem属性，但是ngOnChange事件里面没有凸起。

我整天都在网上搜索，下面报告的内容应该可以，但不能。 我正在使用带有5.2.0的打字稿2.6.2。

谢谢您的帮助！

search-item-main.component.html

 <div class="container-fluid" style="padding-top:70px;"> <div class="row"> <div class="col-sm-4 mb-3"> <div class="card"> <div class="card-body"> <h4>search:</h4> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="placeholder" [(ngModel)]="inputText" [ngModelOptions]="{standalone: true}"> </div> </form> <search-results [searchText]="inputText" [(ngModel)]="selectedItem" ngDefaultControl></search-results> </div> </div> </div> <div class="col-sm-8"> <item-generals [item]="selectedItem"></item-generals> </div> </div> </div> 

search-results.component.ts

 import { Component, SimpleChanges, OnChanges, Input, Inject, Output, EventEmitter } from '@angular/core'; import { LightSearchResultModel } from './../../../models/search-item.models'; import { SearchItemService } from './../../../services/search-item.service'; @Component({ selector: 'search-results', templateUrl: './search-results.component.html', }) export class SearchResultsComponent implements OnChanges { @Input() searchText: string; @Output() selectedItemChange: EventEmitter<any> = new EventEmitter<any>(); public searchResults: Array<LightSearchResultModel>; private itemService: SearchItemService; public selectedItem: LightSearchResultModel; constructor(itemService: SearchItemService) { this.itemService = itemService; } async ngOnChanges(changes: SimpleChanges): Promise<void> { if (this.searchText.length > 3) { this.searchResults = await this.itemService.getMatchingItems(this.searchText); } } //Called with success by a button in the template public selectItem(item: LightSearchResultModel) { this.selectedItem = item; this.selectedItemChange.emit(this.selectedItem); } } 

item-generals.component.ts

 import { Component, SimpleChanges, OnChanges, Input, Inject } from '@angular/core'; import { GeneralInfoModel, LightSearchResultModel } from './../../../models/search-item.models'; import { SearchItemService } from '../../../services/search-item.service'; @Component({ selector: 'item-generals', templateUrl: './item-generals.component.html', }) export class ItemGeneralsComponent implements OnChanges { @Input() item: LightSearchResultModel; public generalItemInfo: GeneralInfoModel; private itemService: SearchItemService; constructor(itemService: SearchItemService) { this.itemService = itemService; } //this ngOnChanges is not raise async ngOnChanges(changes: SimpleChanges): Promise<void> { if (this.item) { this.generalItemInfo = await this.itemService.getGeneralItemInfo(this.item.itemCode); } } } 

Answer 1

由于未调用ngOnChanges() ，因此这意味着不存在绑定更改事件。 对象是可变的，并且最有可能对LightSearchResultModel的引用没有更改。 尝试在发出事件之前克隆此对象。 这将更改对对象的引用，并且绑定更改将开始。

public selectItem(item: LightSearchResultModel) {
    this.selectedItem = {...item}; // cloning with the spread operator
    this.selectedItemChange.emit(this.selectedItem);
  }