Question

maps.component.ts发送title，mapItems和displayedColumns到summary.component.ts进行显示。

问题是title和displayedColumns可以正常工作，但是我不太确定为什么mapItems不能正常工作，并且无法显示。

如果我将displayedColumns和mapItems移动到订阅块之外，则表将正确显示（对于两个数据），但是在订阅块内部仅正确传递了displayed Columns。所以我认为我不太确定发生了什么事。

注意：我的控制台日志中没有收到任何错误消息。

编辑：我正在使用ELEMENT_DATA作为初始测试，最终我想改为通过get方法传递数据。

最终编辑：答案已解决，请在下面查看我的答案。问题出在数据源上。

maps.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { ConfigService } from '../services/config.service';


export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];


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

  title = 'maps';
  mapData;
  mapItems: JSON[];
  error: Error;
  displayedColumns: string[]; 

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    this.displayedColumns = [];

    this.configService.getMaps().subscribe((data) => {

      this.mapData = {
        assetID: "hello"
      };

      this.displayedColumns = ["position", "name", 'weight', 'hello'];
      this.mapItems = JSON.parse(JSON.stringify(ELEMENT_DATA));

    }, error => this.error);

  }

}

maps.component.html

<app-summary [title]="title" [items]="mapItems [displayedColumns]="displayedColumns"></app-summary>

summary.component.ts

export class SummaryComponent implements OnInit {
  addLink: string;
  editLink: string;
  deleteLink: string;

  @Input() title: string;
  @Input() items: JSON[];
  @Input() dataSource: MatTableDataSource<any>;
  @Input() displayedColumns: string[];

summary.component.html

    <div class="table-container">
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
            <div *ngFor="let col_name of displayedColumns">
                <ng-container matColumnDef={{col_name}}>
                    <th mat-header-cell *matHeaderCellDef> {{col_name}} </th>
                    <td mat-cell *matCellDef="let item"> {{item[col_name]}} </td>
                </ng-container>
            </div>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>

Answer 1

仅当displayedColumns返回的observable发出值时，才初始化属性configService.getMaps。我认为这不会发生。您在任何地方都打configService.getMaps.emit({})吗？

Answer 2

与其在subscribe方法内部初始化displayColumns，不如在声明时对其进行初始化：-

-DFOO

Answer 3

我已经解决了这个问题。问题出在我设置dataSource的方式上。我意识到没有将其添加到代码中，但是我在ngOnInit()中使用this.dataSource = this.items设置了它的值。

问题在于，这种情况只会发生一次，而且我错误地认为数据绑定会立即更新依赖于数据绑定值的其他函数/变量。因此，我通过将maps.component.ts在订阅块中的dataSource = this.mapItems中传递给summary.component.ts，解决了我的问题。

为什么组件之间的数据绑定不正确？

3 个答案: