Angular 6 - 在组件之间传递数据答案

【问题标题】：Angular 6 - passing data between componentsAngular 6 - 在组件之间传递数据
【发布时间】：2018-07-28 19:49:58
【问题描述】：

我正在学习 Angular 6 和 typescript，但在多个组件之间传递数据时遇到了一些问题。 ngOnInit 方法中的“expense-box.component.ts”组件“this.participants”看起来像空/空。所以我没有得到任何数据。

第一个（父）组件 - expense.component.ts：

public participants = new Array<Participant>();

getParticipants(): void {
    this.participantService
      .getParticipants(token)
      .subscribe(participants => (this.participants = participants));
}

参与者服务 - participant.service.ts（显示 getParticipants 方法内部的内容）

  getParticipants(token: string): Observable<Participant[]> {
    return this.http.get<Participant[]>(`${this.url}/${token}`).pipe(
      tap(() => this.log(`Participants assigned to trip with token: ${token} fetched`)),
      catchError(this.handleError<Participant[]>('getParticipants'))
    );
  }

这是 html 模板 - expense.component.html：

<app-expense-box *ngIf="selectedSplitTab == 1" [participants]="participants"></app-expense-box>

expense-box.component.ts

export class ExpenseBoxComponent implements OnInit {
  @Input() participants: Participant[];
  public equallyList = new Array<Equally>();

  ngOnInit() {
    this.participants.forEach(element => {
      this.equallyList.push(new Equally(element.id, false, element.name));
    });
  }

  addExpense(): void {
    this.expense.equallyTab = this.equallyList;
    this.expenseService.addExpense(this.expense).subscribe(() => console.log('Expense added!'));
  }
}

这是 html 模板 - expense-box.component.html

<app-split-differently [equallyList]="equallyList" [splitEqually]="splitEqually"></app-split-differently>

它是子组件 - split-differently.component.ts

export class SplitDifferentlyComponent implements OnInit {
  @Input() splitEqually: boolean;
  @Input() equallyList: Equally[];

  public selectedSplitTab = 1;

  constructor() {}

  ngOnInit() {}

  enableSplitTab(selectedTab: number): void {
    this.selectedSplitTab = selectedTab;
  }
}

这是 html 模板 - split-differently.component.html

<div class="form-check" *ngFor="let item of equallyList">
  <input class="form-check-input" type="checkbox" value="" id="equallyTabParticipant{{item.userId}}" checked="{{item.checked}}">
  <label class="form-check-label" for="equallyTabParticipant{{item.userId}}">
    {{ item.userName }}
  </label>
  <hr>
</div>

最后，我希望在将 EquallyList 发送到后端时获得 EquallyList 的当前状态。现在什么都没有显示，因为我做错了（控制台没有记录任何错误）。

感谢 cmets 中的答案，现在一切都正确显示了。我选中了一个复选框（其他未选中），单击保存按钮，所有“选中”都设置为 false，因此值未正确绑定。这是发送到后端的带有 json 的屏幕：

【问题讨论】：

你在expense.component.ts中设置了selectedSplitTab的值吗？
如果你改用.subscribe(participants => (console.log(participants), this.participants = participants)，会打印什么？
加载app-expense-box时可能没有初始化参与者。尝试将您的费用.component.html 更改为：<app-expense-box *ngIf="selectedSplitTab == 1 && participants.length" [participants]="participants"></app-expense-box>
因为它不会初始化 app-expense-box 直到 participants 至少有一个项目
该 HTML 中没有绑定，您需要添加 [(ngModel)]="item.checked"（然后您可以删除 checked="{{item.checked}}"）

标签： angular typescript angular5 angular6

【解决方案1】：

当您尝试在 ngOnInit() 方法中访问时，您的输入可能没有收到数据。

您应该使用 setter 方法进行输入，然后在该方法中执行您的操作。或者，您可以使用 ngOnChanges() 钩子

例如：带二传手

@Input() myInput: any;

 set myInput() {
    //Do stuff here
}

使用 ngOnchanges

ngOnChanges(changes: SimpleChange){
if(changes['myInput']){
//Do stuff here
}
}

【讨论】：