根据从表单中选择的值在屏幕上显示数据

Question

我必须通过应用某些条件，根据通过单选按钮接收到的输入在屏幕上显示数据。当从单选按钮中选择名称属性时，我还需要获取对象 id 的帮助。这是对象数组

  arrayOfObjects = [
    {hiringTypeName : "lateral", hiringTypeId :1,compCode : "IB", compId : 400},
    {hiringTypeName : "new", hiringTypeId :2,compCode : "IB", compId : 401},
    {hiringTypeName : "lateral", hiringTypeId :3,compCode : "BITS", compId : 402},
    {hiringTypeName : "new", hiringTypeId :4,compCode : "BITS", compId : 403},
  ]

  moduleArray =[
    {processName : "offer", processId : 1,data:[{
      name : "demo1", 
      id : 1
    }]},
    {processName : "hire", processId : 2,data:[{
      name : "demo1", 
      id : 1
    }]}
  ]

通过不同的 API 调用，我将从服务器获取数据，看起来像（*仅供参考）

  dummyData = [
        {processName : "offer", 
         processId : 1,
         hiringTypeId :1,
         data:[{
            showName : "demo1", showId : 1
    }]},
        {processName : "hire", 
        processId : 2,
        hiringTypeId :1,
        data:[{
            showName : "demo2", showId : 1
    }]},
        {processName : "offer", 
        processId : 2,
        hiringTypeId :3,
        data:[{
            showName : "demo3", showId : 1
    }]},
  ]

它将具有 processName、processId 和 companyHiringtypeId，这三者的每个组合都会有一个名为“数据”的对象数组与之关联。我想根据选择在屏幕上的数据中显示 showName。

这是一个stackblitz，我使用所有基本数组和表单创建并在 .ts 文件的 cmets 中描述了我需要的内容。我试图将代码保留为尽我所能，切中要害。请让我对此进行更多说明。谢谢你

Answer 1

我根据您的最后评论编辑了我的答案。在 app.component.ts 中：

  showDummyData() {
    this.selectedDummyData = this.dummyData.filter(a => a.processName === this.selected 
                                                  && a.hiringTypeId === +this.selected1);
  }

在 app.component.html 中：

   <div *ngFor="let item of selectedDummyData">
     {{item.data[0].showName}}
   </div>

这里是基于您的代码的 Stackblitz：https://stackblitz.com/edit/angular-fpqbiv

选择两个单选按钮并单击“显示选定的虚拟数据”。