如何将数组从一个组件传递到其子组件

Question

在谷歌搜索了很多相关的答案和尝试之后，我似乎不得不在这里寻求帮助。 我有一个 Angular 应用程序，它的组件之一名为 stock-subscribe，用于显示客户订阅的费用类型。在这个组件中，我创建了另一个组件 stock-addsubs，用于显示该客户尚未订阅的费用类型。 enter image description here

显然，两个 feeType 列表可以组成一个完整的列表。从 stock-subscribe 中，我可以得到一个数组 subscribedFeeIds，它保存了那些订阅的 feeTypes 的所有 id。

我的要求是将这个数组 subscribedFeeIds 传递给 stock-addsubs 组件，以便我可以根据数组的这些 id 过滤掉那些尚未订阅的费用类型。

据我所知，从一个组件传递到其子组件的数据应该是一个简单的过程，两个组件的 html 模板都不应该涉及我的案例。在许多谷歌搜索的解决方案中，使用 @Output 和 @Input 似乎比事件发射更简单。但是，没有一个可以成功传递子组件中的数组元素。

我可以从 stock-subscribe 组件获取预期的 id 列表 (subscribedFeeIds[])，只要传递给子组件的数组不是 EMPTY，所有其余代码都可以正常工作。

1) stock-subscribe.component.ts

    @Component({
      selector: 'app-stock-subscribe',
      templateUrl: './stock-subscribe.component.html',
      styleUrls: ['./stock-subscribe.component.scss']
    })
    export class StockSubscribeComponent implements OnInit {    
      userSubscribe: ISubscribe;    
      @Output() subscribedFeeIds: any = [];  

      listData: MatTableDataSource<any>;

      constructor(private accountService: AccountService,
                  private stockService: StockService) { }

      ngOnInit(): void {
        this.createSubsList();    
      }

      createSubsList() {    
        this.accountService.getUserAccount()
          .subscribe(account => {      
          let userId = account.id.toString();            
          this.stockService.getUserSubscribes(userId).subscribe((data: ISubscribe[]) => {        
            
            // get the id of subscribed fee type and thenpublish to other component
            for (var i = 0; i < data.length; i++)
            {
              if (data[i].status)
                this.subscribedFeeIds.push(data[i].fees[0].id);
            }
            console.log(this.subscribedFeeIds);

            // prepare the list source for display
            this.listData = new MatTableDataSource(data);
            this.listData.sort = this.sort; 
            }, error => {
              console.log(error);
          });
        }, error => {
          console.log(error);
        });    
      }
    }

2) stock-addsubs.component.ts

    @Component({
      selector: 'app-stock-addsubs',
      templateUrl: './stock-addsubs.component.html',
      styleUrls: ['./stock-addsubs.component.scss']
    })
    export class StockAddsubsComponent implements OnInit {
      
      listData: MatTableDataSource<any>; 

      @Input() subscribedFeeIds: any []; 
      
      constructor(private feesService: FeesService) { }

      ngOnInit(): void {
        this.createFeeList();    
      }    

      createFeeList() {                
        this.feesService.getFeeList().subscribe((data: IFee[]) => { 
          
          // filter those already subscribed
          for (var i = 0; i < this.subscribedFeeIds.length; i++)
            {
              for (var j = 0; j < data.length; j++)
              {
                data = data.filter(f => f.id != this.subscribedFeeIds[i]); 
              }          
            }

          // prepare data to display
          this.listData = new MatTableDataSource(data);      
          }, error => {
            console.log(error);
        });
      } 
}

Answer 1

您可以实现以下任一方法：

1.) 根据您上面的代码增强您的@Input 和@Output：

stock-subscribe.component.ts

@Component({...})
export class StockSubscribeComponent implements OnInit {    

   @Output() subscribedFeeIds: EventEmitter<any> = new EventEmitter<any>(); 

   list: any[] = [];               // To store your ids, do not use the @Output variable above to push things inside a loop, you may not want to continuously emit data for an nth number of the sequence.

   ...

   createSubsList() {    

      ...
    
      for (var i = 0; i < data.length; i++) {
        ...
    
        if (data[i].status)
           this.list.push(data[i].fees[0].id);      // Push IDs on this.list not on this.subscribedFeeIds
      }  

      this.subscribedFeeIds.emit(this.list);        // After the loop finishes, emit the final list value
                                                    // Do not use .push() on @Output variable, this is an emission variable so use .emit()

   

   }

}

或者您也可以在处理数组列表时执行以下任何一种方法：

// METHOD #1
this.filteredIds = [];
for(const { status, fees } of FEES_DATA) {
   if (status) filteredIds.push(fees[0].id);
}

OR    

// METHOD #2
this.filteredIds = FEES_DATA
  .filter(({ status }) => status)
  .map(({ fees }) => fees[0].id);



// Then emit the filtered ids
this.list.emit(this.filteredIds);

stock-addsubs.component.ts

@Component({...})
export class StockAddsubsComponent implements OnInit {

   // Since you are waiting for emission from StockSubscribeComponent which the 
   // emission also waits till the loop is finished based on the code above, better to
   // implement the @Input like this so as to avoid processing a an empty list

   @Input() set subscribedFeeIds(list: any[]) {
       if (list && list.length) {              // If the list now has items, call createFeeList() function
         this.createFeeList();
       }
   } 

   ...

}

____

or

@Component({...})
export class StockAddsubsComponent implements OnInit, OnChanges {    // Add OnChanges

  @Input() subscribedFeeIds: any []; 


  ngOnChanges({ subscribedFeeIds }: SimpleChanges) {          // SimpleChanges from @angular/core

    if (subscribedFeeIds && subscribedFeeIds.currentValue && subscribedFeeIds.currentValue.length) {
      this.createFeeList();
    }

    // You can also console the subscribedFeeIds and check it's value or changes
    console.log(subscribedFeeIds);

  }

}

已创建 Stackblitz Demo 供您参考

---

2.) 使用 RxJS Subject 或 BehaviorSubject 发出数据

使用此 Stackblitz Demo 供您参考。