在primeng数据表中预选项目

Question

我在组件“ExtractComponent”中有一个名为“extract”的函数，它发布一些数据。当我单击“提取”按钮时，我将用户发送到“ExtractedComponent”的另一条路径，该组件使用带有一些输入和输出的共享组件模板。在该组件中有两个表，仅当我在第一个表上选择某些内容时才显示第二个表。在第一个表上有一个（onRowSelect）方法，我用它通过 api 从服务器调用 get 方法来显示第二个表。该方法期望提供一个“id”。换句话说，当我在第一个表中选择一行时，另一个表会获取它的源。所以，我想从那个执行 post 方法的函数“extract”获取响应，并将该响应（具有“Id”）发送到“ExtractedComponent”，它将从该响应中选择具有“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();
  }
}

这是一个表格组件，它是一个模板，它被其他 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 函数中删除事件发出并从 Extracted 组件中移动 getExtractJobObjects() 而不是删除的发出并添加以下行来做到这一点：

this.selectedItem = this.jobList[0];

它将行标记为突出显示。