Question

我希望使用成角度的子组件将材质表（子）与其他元素（父）分开，但是奇怪的是，我似乎无法从父级获取数据或从父级获取初始化数据并且无法刷新。这是代码：首先，父.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>

，您可以看到两个孩子，一个是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];
    }
  }

}

然后创建子（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 但是很抱歉，我不擅长棱角分明，所以我不确定如何将父级加载到页面。

Answer 1

根据控制台输出，在父组件更新子组件之前，请在子组件中使用tablesource。不用在子组件的datasource中创建ngOnInit，而是将tablesource属性定义为setter并在该setter中创建datasource：

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

有关演示，请参见this stackblitz。

为什么我无法从Angular的父组件获得结果

1 个答案: