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

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，这三者的每种组合都将具有与其关联的名为“data”的对象数组。我想根据选择在屏幕上显示数据中的 showName。

这是一个stackblitz我用所有基本数组和表单创建了它，并在 .ts 文件的注释中描述了我需要的内容。我尽力使代码保持简洁和切题。请向我询问更多说明。谢谢您

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

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