正在 primeng 数据中预选项目 table

Question

我在组件 "ExtractComponent" 中有一个名为 "extract" 的函数，其中 post 包含一些数据。当我单击按钮 "extract" 时，我将用户发送到另一条路线 "ExtractedComponent"，此组件使用带有一些输入和输出的共享组件模板。在该组件中有两个 table，第二个 table 仅当我 select 在第一个 table 上显示时才显示。第一个 table 上有一个 (onRowSelect) 方法，我用它通过 api 从服务器调用 get 方法以显示第二个 table。该方法需要提供 "id"。换句话说，当第一个 table 中的一行 select 时，另一个 table 获取其来源。所以，我想从执行 post 方法的函数 "extract" 获得响应，并将该响应（具有 'Id'）发送到 "ExtractedComponent"，它将 select 该响应中包含 "id" 的行。

我试过使用单例服务发送响应然后订阅它，但是我遇到了多次订阅该服务的问题，并且在几次调用后它失去了它的价值..

这是我要从中获取响应并发送响应的提取组件。

export class ExtractComponent implements OnInit {
  slug: string;
  id: number;
  disabled = true;
  selectedId: number;
  selectPlaceholder: any;
  loading = false;
  items: any[];
  cols: any[] = [];
  configurations: any[] = [];
  extractResponse: any;

  configurationsResponseModel: BaseConfigurationsModel[];
  selectedConfiguration = new ConfigurationResponseModel();
  select = new BaseConfigurationsModel();
  adapterModel = new AdapterModel();

  extractJobRequestModel = new ExtractJobRequestModel();

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private adaptersService: AdaptersService,
    private breadcrumbService: BreadcrumbService,
    private communicationService: CommunicationService
  ) { }

  ngOnInit() {
    this.getSlug();
    this.getAdapter();

  }

  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
      this.id = params['id'];
      if (this.id) {
        this.selectConfiguration(this.id);
      } else {
        this.selectedConfiguration = null;
      }
      this.getAdapterConfigurations();
    });
  }

  extract() {
    this.loading = true;
    this.extractJobRequestModel.id = 0;
    this.adaptersService.extractAdapterConfiguration(this.extractJobRequestModel).subscribe((response) => {
      this.loading = false;
      this.extractResponse = response;
      this.communicationService.preselectItem.next(this.extractResponse);
      this.router.navigate(['/adapters/' + this.slug + '/transform']);
    },
      (error) => {
        this.loading = false;
      });
  }

  onSubmit() {
    this.extractConfiguration();
  }
}

这是 table 组件，它是一个模板，它被其他 3 个组件使用。我试图通过订阅它然后调用 selectJob() 这是 (onRowSelect) 方法来获取构造函数中的信息。然后在 selectJob 中，我将值发送给 ExtractedComponent。

export class TableComponent implements OnInit, DoCheck {
  displayDialog = false;
  headerMessage: string;
  @Input() jobTitle: string;
  @Input() slug: string;
  @Input() objectTitle: string;
  @Input() jobSelected = false;
  @Input() jobCols: any[];
  @Input() objectCols: any[];
  @Input() jobList: ExtractJobResponseModel[] = [];
  @Input() objectList: any[] = [];
  @Output() jobChange = new EventEmitter();
  @Output() editSave = new EventEmitter();
  @Output() objectChange = new EventEmitter();
  @Input() selectedItem: any;
  preselectedItem: any;

  extractJobUpdateModel = new ExtractJobUpdateModel();
  baseEtlRequestModel = new BaseEtlRequestModel();

  constructor(
    private adaptersService: AdaptersService,
    private router: Router,
    private route: ActivatedRoute,
    private communicationService: CommunicationService,
  ) {
    this.communicationService.preselectItem.subscribe((r) => {
      this.selectedItem = r;
      this.selectJob();
    });
  }

  ngOnInit() {
    this.getSlug();
  }


  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
    });
  }

  selectJob() {
    this.jobSelected = true;
    this.jobChange.emit(this.selectedItem);
    this.baseEtlRequestModel.job_id = this.selectedItem.id;
  }

}

提取的组件

export class ExtractedComponent implements OnInit {
  slug: string;
  extractJobObjects: ExtractJobObjectResponseModel[];

  extractJobResponseModel: ExtractJobResponseModel[];
  extractObject: ExtractJobObjectResponseModel;
  extractJobUpdateModel = new ExtractJobUpdateModel();
  adapterModel = new AdapterModel();

  constructor(
    private adaptersService: AdaptersService,
    private route: ActivatedRoute,
    private breadcrumbService: BreadcrumbService,
    private communicationService: CommunicationService
  ) { }

  ngOnInit() {
    this.getSlug();
    this.setColumsForTables();
  }

  getSlug() {
    this.route.params.subscribe(params => {
      this.slug = params['slug'];
      if (this.slug) {
        this.getExtractJobs();
        this.getAdapter();
      }
    });
  }

  getExtractJobs() {
    this.adaptersService.getExtractJobs(this.slug).subscribe((response) => {
      this.extractJobResponseModel = response;
      this.extractJobResponseModel.forEach(x => {
        const pipe = new DatePipe('en-EU');
        x.created = pipe.transform(x.created, 'dd/MM/yyyy hh:mm aa');
      });
    }, (error) => {

    });
  }

  getExtractJobObjects(e) {
    this.adaptersService.getExtractJobObjects(e.id).subscribe((response) => {
      this.extractJobObjects = response;
    });
  }

}

ExtractedComponent.html

<app-table 
*ngIf="extractJobResponseModel" 
[jobList]="extractJobResponseModel"
[jobSelected]="jobSelected"
[objectList]="extractJobObjects"
(jobChange)="getExtractJobObjects($event)" 
>
</app-table>

Answer 1

我设法做到这一点，方法是从 table 组件中的 selectJob 函数中删除事件发出，并从提取的组件中移动 getExtractJobObjects() 而不是删除的发出并添加以下行：

this.selectedItem = this.jobList[0];

它将行标记为突出显示。

正在 primeng 数据中预选项目 table

Preselecting item in primeng data table

primeng

angular

primeng-datatable