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

【问题标题】：Angular show data on the user screen based on the values from the form根据表单中的值在用户屏幕上显示数据
【发布时间】：2020-04-10 07:04:45
【问题描述】：

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

【问题讨论】：

你想要processId来自以下哪个数组arrayOfObjects、moduleArray、dummyData？
此外，您的问题不应仅包含指向诸如 stackblitz 之类的外部源的链接，而没有问题中 some 代码的任何详细信息。（例如，如果链接将来变得陈旧，问题将完全发挥作用）

标签： javascript html json angular typescript

【解决方案1】：

我不知道你有没有看到我做了什么（我不知道 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 字段

和平

【讨论】：

谢谢，我会试试的。仅供参考，您可以使用 fork 选项分叉 stackblitz，对其进行更改，然后共享 url。干杯
它显示类型 {} 上不存在招聘类型 ID 的错误。你可以分叉堆栈闪电战并分享它。谢谢

【解决方案2】：

我无法分叉堆栈闪电战

我已经尝试过使用该代码

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

如果您还需要什么，请告诉我..

谢谢

【讨论】：