綁定兩個零件的角度為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);
  }