typescript 阵列中的Angular 变化检测问题

emeijp43  于 2023-05-08  发布在  TypeScript
关注(0)|答案(2)|浏览(120)

我在父/子关系中有以下两个组件:“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”数组已经更改,子组件中也检测不到更改。
我的理解是,只要数组引用被更改,那么这种更改就应该被检测到。
我相信在我的场景中数组引用被改变了。
你知道我做错了什么吗?
感谢您的任何建议。

qqrboqgw

qqrboqgw1#

您需要使用ngOnChanges或setter和getter。我更喜欢setter和getter。请看下面。官方文档在这里。

@Component
({
   selector: "listings-list",
   templateUrl:"listings-list.component.html",
   styleUrls:["listings-list.component.css"]
})
export class PropertiesListComponent {      

   private _properties: Property[] = [];
   @Output()
   public block:EventEmitter<Property> = new EventEmitter();

   @Output()
   public unBlock:EventEmitter<Property> = new EventEmitter();

   @Input() set properties(value): Property[] {
      this._properties = value;
   } 

   get properties(): Property[] {
      return this._properties;
   }

}
7vux5j2d

7vux5j2d2#

使用ngOnChanges。在子组件中-->

@Input() properties: Property[] = [] ;
_properties:Property[] = [] ;

ngOnChanges(){
  _properties=properties;//Use this "_properties" variable in your child list view
 }

相关问题