我在父/子关系中有以下两个组件:“Properties”-此场景中的父项和“listingsList”-子项。
下面是父模板:
<div class="row">
<div class="col-9 p-2">
<listings-list [properties] = "properties" ></listings-list>
<div *ngIf="properties?.length == 0" class="card-text bg-white p-1" i18n="@@noResult" >No results found!</div>
<div *ngIf="properties?.length! > 0 && totalNumberOfRecords == null" class="alert alert-warning my-1" role="alert" i18n="@@paginationWarning">Pagination will load shortly!</div>
<div *ngIf="properties?.length! > 0" class="btn-group float-right">
<ngb-pagination [collectionSize]="totalNumberOfRecords" [pageSize]="state!.propertiesPerPage" [(page)]="state!.page" (pageChange)="changePage($event)" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>
</div>
</div>
</div>
下面是子组件:
@Component
({
selector: "listings-list",
templateUrl:"listings-list.component.html",
styleUrls:["listings-list.component.css"]
})
export class PropertiesListComponent {
@Output()
public block:EventEmitter<Property> = new EventEmitter();
@Output()
public unBlock:EventEmitter<Property> = new EventEmitter();
@Input()
public properties: Property[] = [] ;
}
当用户决定删除列表时,将对父组件调用以下方法
public delete(propertyId: number): void {
if (propertyId !== undefined) {
this.model.deleteProperty(propertyId)
.subscribe( _ => {
this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`));
var status: boolean = this.propertyStatus == PROPERTY_STATE_ACTIVE ? true : false;
var filter = { createdBy: this.authService.user.userName, isActive: status, pageNumber: this.state!.page, pageSize: this.state!.propertiesPerPage };
this.model.getPropertyByFilter(JSON.stringify(filter)).subscribe(data => {
this.properties = [...data] ;
});
});
}
}
我的问题是,即使“properties”数组已经更改,子组件中也检测不到更改。
我的理解是,只要数组引用被更改,那么这种更改就应该被检测到。
我相信在我的场景中数组引用被改变了。
你知道我做错了什么吗?
感谢您的任何建议。
2条答案
按热度按时间qqrboqgw1#
您需要使用
ngOnChanges
或setter和getter。我更喜欢setter和getter。请看下面。官方文档在这里。7vux5j2d2#
使用ngOnChanges。在子组件中-->