根据表单中的值在用户屏幕上显示角度数据

时间:2019-12-17 18:17:38

标签: javascript html json angular typescript

我必须通过应用某些条件,根据通过单选按钮接收的输入,在屏幕上显示数据。从单选按钮中选择名称属性时,我还需要帮助来获取对象的ID。 这是我创建的stackblitz,其中包含所有基本数组和表单,并在.ts文件的注释中描述了我所需要的内容。我已经尽力使代码保持整洁。请要求我进一步澄清。谢谢。

2 个答案:

答案 0 :(得分:0)

我不知道您是否看到我所做的事情(我不知道Stackblitz的工作原理如何),但是

添加

    const o = this.dummyData.find(x => x.hiringTypeId == this.mergeObj.hiringTypeId && x.processName == this.mergeObj.processName);
    if (o) {
      this.mergeObj.processId = o.processId;
    }
    // NOW ProcessId is set (if found)
    console.log("mergedObject",this.mergeObj)

第61行(并将: any类型添加到mergeObj中)为您提供了相应的对象

if (o)块中,您甚至可以使用showName来检索o.data[0].name字段

和平

答案 1 :(得分:0)

我无法进行堆叠突击

我尝试使用该代码

请将您的addFilter函数更改为

addFilter(filter: NgForm) {

    Object.assign(this.mergeObj, filter.value);
    console.log("ss");

    this.finalArray = this.dummyData.filter(a => {
      return (
        (filter.value.processName == null ||
          filter.value.processName == undefined ||
          filter.value.processName == a.processName) &&
        (filter.value.hiringTypeId == null ||
          filter.value.hiringTypeId == undefined ||
          filter.value.hiringTypeId == a.hiringTypeId)
      );
    });


    filter.reset();
    console.log("mergedObject", this.mergeObj);

    //Add code here
    //Important : right now the mergedObj is giving me the processName and hiringTypeId. I want the mergeObj to give me the processId along with the processName and hiringTypeId. {processName : "selectedValue",processId : "selectedValue", hiringTypeId : "selectedValue"}
  }

您将获得结果进入finalArray

,然后在您的html中从第25行到.....

<div style="border:1px solid green">
    <!-- <span>Show Data under this or legit anywhere, I have exhausted my every last motivated cell.HELP ME in the name of Baby Yoda</span> -->
    <div *ngFor="let data of finalArray">
        <div>processName : {{data.processName}}</div>
        <div>processId : {{data.processId}}</div>
        <div>hiringTypeId : {{data.hiringTypeId}}</div>
        <div>{{data.data | json}}</div>
    </div>
</div>

注意:这里我使用了过滤器功能,该功能将从服务器端获取的dummayarray中过滤数据,但是如果只想获取一个对象而不是可以使用find方法,它将仅返回一个obj

让我知道您是否还需要其他东西。

谢谢