1

我对 Angular 比较陌生。我试图使用 @Input() 将数据从父组件传递到子组件，但未反映更改。我有一个带有选择元素的父组件，我想将所选项目的值传递给孩子。父组件有一个带有几个 mat-tab(s) 的 mat-tab-group。

父 HTML

<mat-form-field>
    <mat-select placeholder="Class" [formControl]="selectedClassControl" (selectionChange)="changeClassId()">
        <mat-option *ngFor="let class of classes" value="{{class.id}}">{{class.classNumber}}-{{class.section}}</mat-option>
    </mat-select>
</mat-form-field>
<mat-tab-group color="primary" (selectedIndexChange)="selectTab($event)">
    <mat-tab label="Units">
        <app-units [classId]="classId" *ngIf="selectedTab === 0"></app-units>
    </mat-tab>
    <!-- many such tabs with the same structure --> 
</mat-tab-group>

家长 TS

  classId : number = 0;
  classes: Class[];
  selectedClass: any;
  selectedClassControl = new FormControl(this.selectedClass);
  constructor(private classService: ClassService, private stateMgmtService: 
StateManagementService) { 
    var schoolId = this.stateMgmtService.getSchoolId();
    this.classService.getClasses(schoolId).subscribe(data =>{
      this.classes = data;
    })
  }
  selectedTab = 0;
  ngOnInit(): void {
  }

  selectTab(event) {
    this.selectedTab = event;
  }

  changeClassId(){
    this.classId = this.selectedClassControl.value;
    console.log("ClassId changed to "+this.classId);
  }

子 HTML

<mat-form-field>
    <mat-select placeholder="Subject" [formControl]="selectedSubjectControl" >
        <mat-option *ngFor="let subject of subjects" value="{{subject.id}}">{{subject.code}}-{{subject.name}}</mat-option>
    </mat-select>
</mat-form-field>

儿童 TS


  @Input() classId : number = 0;
  subjects: Subject[];
  selectedSubject: any;
  selectedSubjectControl = new FormControl(this.selectedSubject);
  constructor(private classService: ClassService) { 
    console.log("classId"+this.classId);
    if(this.classId != 0)
    classService.getSubjects(this.classId).subscribe( data => {
      this.subjects = data;
    })
  }

我看到的是，当我在父组件中更改我的选择时，classId 没有传达给子组件，我应该手动刷新组件以使更改得到反映吗？
非常感谢任何帮助...
TIA

4

2 回答 2

4

这里有几件事。首先要小心使用 Subject 作为类名 Subject 是 rxjs 中的一个对象，您可能会不小心导入它。我会让你的班级名称更具体。

接下来你真的不需要 selectionChange 事件逻辑。相反，您可以订阅表单控件的 valueChanged 属性，并在它像这样更改时设置 classId 变量

this.selectedClassControl.valueChanges.subscribe(e => this.classId = e),

接下来在您的子组件中，classId 将更新，但您的主题数组不会

我会像这样在您的输入上使用设置器

@Input() set classId(val: number) {
   this._classId = val;
 if(val != 0) {
  classService.getSubjects(val).subscribe( data => {
   this.subjects = data;
  }); //assuming this is an http service so no unsubscribe is required
}
}
private _classId: number = 0;
于 2020-05-18T20:44:00.660 回答
1

对于输入变量，构造函数可能过早地被触发。您可以尝试使用OnChangeshook 手动监听输入变量的变化。尝试以下

import { Component, Input, OnChanges } from "@angular/core";

export class ChildComponent implements OnChanges {
  @Input() classId: number = 0;
  subjects: Subject[];
  selectedSubject: any;
  selectedSubjectControl = new FormControl(this.selectedSubject);

  constructor(private classService: ClassService) { }

  ngOnChanges() {
    console.log("classId" + this.classId);
    if(this.classId != 0) {
      this.classService.getSubjects(this.classId).subscribe( data => {
        this.subjects = data;
      });
    }
  }

  private doSomething(input: string) {}
}
于 2020-05-18T20:33:20.557 回答