Question

我的角度4应用程序出了问题。我正在接受用户输入并将其附加到一个数组，该数组保存表的数据。我可以看到输入被推入数组，但表本身没有更新。我尝试过使用changeDetection和true，false条件，但遗憾的是不成功。有没有其他方法用推送数据更新表？我的代码如下，包括表格html，ts文档和输入ts doc。非常感谢！

输入-form.component.ts

export class InputFormComponent implements OnInit {
  subjectItems: Array<string> = [];
  subjectNumber = 0;

  constructor(public snackBar: MatSnackBar) {
  }

  ngOnInit() {
  }

  addSubjectToTable (position2, subjectNameItem2, totalTimeStudy2) {
    SubjectTableDATA.push({
      position: position2, subjectNameItem: subjectNameItem2,
      totalTimeStudy: totalTimeStudy2
    });
    console.log('subejcttable called');
    console.log(SubjectTableDATA);
    reloadTable();
    console.log('reloadTable func called');
  }
  addSubject(subjectName, timeStudy) {
    console.log('Called function');
    if (subjectName && timeStudy) {
      console.log('All fields inputted, adding...');
      this.subjectItems.push(subjectName, timeStudy);
      this.subjectNumber += 1;
      console.log(this.subjectItems);
      this.addSubjectToTable(this.subjectNumber, subjectName, timeStudy);
    }
  }

}

table.component.ts

export class TableComponent implements OnInit {
  displayedColumns = ['position', 'subjectNameItem', 'totalTimeStudy'];
  dataSource = new MatTableDataSource<SubjectTable>(SubjectTableDATA);

  constructor() {
  }

  ngOnInit () {}
}
export interface SubjectTable {
  position: number;
  subjectNameItem: string;
  totalTimeStudy: string;

}
export var SubjectTableDATA: SubjectTable[] = [
  {position: 1, subjectNameItem: 'math', totalTimeStudy: '9 hours'}
];

export function reloadTable () {
  console.log('reloading table');
}

table.component.html

<div class="TableForInputtedSubjects">
  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> ID: </mat-header-cell>
      <mat-cell *matCellDef="let SubjectTable"> {{SubjectTable.position}} </mat-cell>
    </ng-container>
    <!-- Name Column -->
    <ng-container matColumnDef="subjectNameItem">
      <mat-header-cell *matHeaderCellDef> Subject Name: </mat-header-cell>
      <mat-cell *matCellDef="let SubjectTable"> {{SubjectTable.subjectNameItem}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="totalTimeStudy">
      <mat-header-cell *matHeaderCellDef> Total Study Time: </mat-header-cell>
      <mat-cell *matCellDef="let SubjectTable"> {{SubjectTable.totalTimeStudy}} </mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

刷新Angular 4表

0 个答案: