繁体   English   中英

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

[英]Angular show data on the user screen based on the values from the form

我必须通过应用某些条件,根据通过单选按钮接收到的输入在屏幕上显示数据。 当从单选按钮中选择 name 属性时,我还需要有关获取对象 id 的帮助。 这是我使用所有基本数组和表单创建的stackblitz ,并在 .ts 文件的注释中描述了我需要的内容。 我试图保持代码尽可能干净并且切中要害。 请让我对此进行更多说明。 谢谢。

我不知道你是否看到我做了什么(我不知道 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)块中,您甚至可以使用o.data[0].name检索您的showName字段

和平

我无法分叉 stackblitz

我试过用那个代码

请将您的 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

需要帮助请叫我..

谢谢

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM