javascript - 为什么我无法从 Angular 的父组件中获取结果

Question

我希望 Angular 子组件将 Material 表(子)与其他元素(父)分开，但奇怪的是我似乎无法从父级获取数据，或者我从父级获取初始化数据并且无法刷新。
这是代码:
首先，父 .ts 文件:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{

  ticketList: Ticket[] = [];
  originalTicketList: Ticket[] = [];
  filterAllForm: FormGroup;
  labelList: string[];
  homeLabelList: string[];
  currentTicketId: string;
  searchBy: string = '';
  maxall : number = 100;
  isLoading :boolean = true;
  showRelatedTickets = true;

  constructor(private ticket: TicketService,
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.filterAllForm = this.formBuilder.group({
      startDate: [''],
      endDate: ['']
    });
    this.getAllTicket();

  }


  get filterFormControls() { return this.filterAllForm.controls; }



  getAllTicket() {
    let queryParams = '';
    console.log(this.currentTicketId) + " " + this.searchBy;
    if (this.searchBy === 'id') {
      queryParams = 'id=' + this.currentTicketId;
      this.showRelatedTickets = true;
    }else if(this.searchBy !== ''){
      queryParams = this.searchBy + '=' + this.currentTicketId;
      this.showRelatedTickets = false;
    }

    this.ticket.getAllTicket(queryParams).then((res: Ticket[]) => {
      this.isLoading = false;
      this.ticketList = res;
      this.originalTicketList = this.ticketList;
    });
  }


  searchTicket() {
    this.isLoading = true;
    this.getAllTicket();
  }

}

父 html 是这样的:

    <div class="ticket-container">
      <mat-card *ngIf="isLoading" class="mat-card-style">
        <mat-progress-spinner color="primary" mode="indeterminate">
        </mat-progress-spinner>
      </mat-card>
      <div *ngIf="showRelatedTickets">
        <app-dashboard-related-tickets-table [tablesource]="ticketList">
        </app-dashboard-related-tickets-table>
      </div>
      <div *ngIf="!showRelatedTickets">
        <app-dashboard-non-related-tickets-table [tablesource]="ticketList">
        </app-dashboard-non-related-tickets-table>
      </div>
    </div>

你可以看到两个 child ，一个是app-dashboard-related-tickets-table，另一个是app-dashboard-non-related-tickets-table，它们有不同的格式并通过按钮更改
showRelatedTickets .这里我将展示第一个
子(app-dashboard-related-tickets-table).ts 文件:

@Component({
  selector: 'app-dashboard-related-tickets-table',
  templateUrl: './dashboard-related-tickets-table.component.html',
  styleUrls: ['./dashboard-related-tickets-table.component.scss']
})
export class DashboardRelatedTicketsTableComponent implements OnInit, AfterViewInit{
  dataSource: any;
  displayedDetailColumns = ['id', 'caseStatus', 'anchorPoint', 'findingSourceSystem','caseCreateTimestamp', 'resolvedBy', 'resolution', 'resolutionNote'];
  maxall: number = 100;

  @Input() tablesource: Ticket[];
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }
  constructor() { }

  ngOnInit() {
    console.log(this.tablesource);
    this.dataSource = new MatTableDataSource(this.tablesource);
  }

  ngAfterViewInit(){
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.getPageSizeOptions();
  }

  getPageSizeOptions(): number[] {
    if (this.dataSource.data.length>this.maxall){
      return [20, 50, this.dataSource.data.length];
    }else{
      return [20, 50, this.maxall];
    }
  }

}

然后是 child(app-dashboard-related-tickets-table) .html 文件:

<table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8"
    #exporter="matTableExporter">
    <!-- Ticket Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"> SIR ID </th>
        <td mat-cell *matCellDef="let element" class="mat-column-id-source">
            <a href='ticket/{{element.id}}'>{{element.id}}</a>
        </td>
    </ng-container>

    <!-- Type Column event source -->
    <ng-container matColumnDef="findingSourceSystem">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"> Source </th>
        <td mat-cell *matCellDef="let element" class="mat-column-id-source"> {{element.findingSourceSystem}} </td>
    </ng-container>

    <!-- Type Column Related Event count -->
    <ng-container matColumnDef="anchorPoint">
        <th mat-header-cell *matHeaderCellDef class="mat-column-related-ticket-num"> Related Cases </th>
        <td mat-cell *matCellDef="let element" class="mat-column-related-ticket-num">
            {{element.relatedVertices}} </td>
    </ng-container>

    <!-- Type Column event source -->
    <ng-container matColumnDef="caseStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-case"> Case Status </th>
        <td mat-cell *matCellDef="let element" class="mat-column-case"> {{element.caseStatus}} </td>
    </ng-container>

    <!-- Type Column event source -->
    <ng-container matColumnDef="caseCreateTimestamp">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-date"> Case Created </th>
        <td mat-cell *matCellDef="let element" class="mat-column-date">
            {{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}}
        </td>
    </ng-container>

    <ng-container matColumnDef="resolvedBy">
        <th mat-header-cell *matHeaderCellDef class="mat-column-resolvedBy"> Resolved By </th>
        <td mat-cell *matCellDef="let element" class="mat-column-resolvedBy"> {{element.resolvedBy}}
        </td>
    </ng-container>

    <ng-container matColumnDef="resolution">
        <th mat-header-cell *matHeaderCellDef class="mat-column-closeCode"> Close Code </th>
        <td mat-cell *matCellDef="let element" class="mat-column-closeCode"> {{element.resolution}}
        </td>
    </ng-container>

    <ng-container matColumnDef="resolutionNote">
        <th mat-header-cell *matHeaderCellDef class="mat-column-closeNote"> Close Note </th>
        <td mat-cell *matCellDef="let element" class="mat-column-closeNote"> {{element.resolutionNote}}
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons></mat-paginator>
<button mat-raised-button (click)="exporter.exportTable('csv')" class="export-button">Export Results</button>

所以在子组件中，我使用@input tablesource，并显示dataSource。但结果是这样的:


子组件似乎已加载，因为导出结果按钮已存在，但表格未显示。我只是做

console.log(tablesource)

我有 []

这是浏览器控制台日志:

任何想法发生了什么？

我试图在这里重现:https://stackblitz.com/edit/angular-hbzpvr
但我很抱歉，我不擅长 Angular ，所以我不确定如何将父级加载到页面。

Answer 1

根据您的控制台输出，您使用 tablesource在您的子组件被父组件更新之前。而不是创建 datasource在 ngOnInit子组件，定义 tablesource属性作为 setter 并创建 datasource在那个二传手:

@Input() set tablesource(value: Ticket[]) {
  console.log(value);
  this.dataSource = new MatTableDataSource(value);
}

见 this stackblitz演示。