Question

我是Angular 6的新手，所以如果这是一个愚蠢的问题，请原谅。

我有一个外部组件和一些内部组件，以便外部组件将信息传递给内部组件。在这种情况下，我要传递2个值，一个JSON（可以正常工作）和一个过滤字符串[filterString]（这是问题所在）。

当外部allSegmentsFilter模型的值更改时，出现以下错误：

TypeError: Cannot read property 'currentValue' of undefined

在：

<app-json-to-table-viewer [rawJSON]="x" [filterString]="allSegmentsFilter"></app-json-to-table-viewer>

外部组件视图（为简洁起见，为摘要起见）：

<div class="col-lg-8">
   <div class="row">
      <mat-form-field>
         <input  matInput                     
         placeholder="Search all segments"
         [(ngModel)]="allSegmentsFilter" >
      </mat-form-field>
   </div>
   <div class="row" *ngFor="let x of payfilemessage;" >
      <div >          
         <app-json-to-table-viewer [rawJSON]="x" [filterString]="allSegmentsFilter"></app-json-to-table-viewer>
      </div>
      <br>
   </div>
</div>

外部组件的代码

export class OuterComponent implements OnInit {


  payfilemessage = [/**abstracted, assume this has some values */];
  allSegmentsFilter="";  

  constructor() { }

  applyPayFileMessageFilter(filterValue: string) {    
    console.log("TBD filter:"+filterValue);
  }  

  ngOnInit() {

  }

}

内部组件视图：

<mat-tab-group class="mat-elevation-z2">
    <mat-tab label="Keys as columns">
        <div>
            <mat-form-field>
                <input  matInput 
                        (keyup)="applyFilter($event.target.value)" 
                        placeholder="Filter"
                        [(ngModel)]="filterString"
                        >
             </mat-form-field>             
             <table mat-table [dataSource]="KeysAsCols.Source" matSort>
                <ng-container *ngFor="let key of KeysAsCols.Columns;" [matColumnDef]="key">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{key}} </th>
                <td mat-cell *matCellDef="let element"> {{element[key]}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="KeysAsCols.Columns"></tr>
                <tr mat-row *matRowDef="let row; columns: KeysAsCols.Columns;"></tr>
             </table>
             <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
        </div>
    </mat-tab>
    <mat-tab label="Keys as rows"> Keys as rows </mat-tab>
    <mat-tab label="Raw JSON "> Raw JSON </mat-tab>
  </mat-tab-group>

内部组件代码：

import { Component, OnInit, Input, SimpleChanges, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-json-to-table-viewer',
  templateUrl: './json-to-table-viewer.component.html',
  styleUrls: ['./json-to-table-viewer.component.scss']
})
export class JsonToTableViewerComponent implements OnInit {
  @Input() rawJSON: any[];
  @Input() filterString:string="";





  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  KeysAsCols = {
    Source: <MatTableDataSource<any>> null,
    Columns: <String[]> []

  };

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {

    if (this.rawJSON) {
      if (changes.rawJSON.currentValue != changes.rawJSON.previousValue )
        {
          console.log('value changed!')
          this.KeysAsCols.Source = new MatTableDataSource<any>(this.rawJSON);          
          this.setAllKeys();
          this.KeysAsCols.Source.paginator=this.paginator;
          this.KeysAsCols.Source.sort=this.sort;  
        }
    }

  }
  setAllKeys(){
    this.KeysAsCols.Columns = this.rawJSON.length==0?[]:Object.keys(this.rawJSON[0]);    
  } 
  applyFilter(filterValue: string) {
    this.KeysAsCols.Source.filter = filterValue.trim().toLowerCase();
  }

  ngOnInit() {
  }
  ngAfterViewInit() {

}

}

我尝试在两个组件中提供默认值以进行建模，但是仍然会引发错误。

Answer 1

您可以在onchanges函数中添加防御条件，例如：

if (this.rawJSON && changes.rawJSON) {
      if (changes.rawJSON.currentValue != changes.rawJSON.previousValue )
        {
          console.log('value changed!')
          this.KeysAsCols.Source = new MatTableDataSource<any>(this.rawJSON);          
          this.setAllKeys();
          this.KeysAsCols.Source.paginator=this.paginator;
          this.KeysAsCols.Source.sort=this.sort;  
        }
    }

无法读取未定义的属性“ currentValue”

1 个答案: