根据表单中的值在用户屏幕上显示角度数据 [英] Angular show data on the user screen based on the values from the form

问题描述

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

I have to display the data on the screen based on the input received via radio buttons by applying certain conditions. I also need help with fetching the id of an object when the name attribute is selected from the radio button. Here is a stackblitz that I have created with all the basic arrays and form made and described what I need in the comments in the .ts file. I have tried to keep the code as clean as I could and to the point. Please ask me for more clarification on the same. Thanks.

推荐答案

我无法派发堆栈闪电

我尝试使用该代码

请将您的addFilter函数更改为

please change your addFilter function to

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

you will get result into finalArray

，并在您的html中从第25行到.....

and in your html from line no 25 to .....

<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

Note : Here I have used filter function that will filter data from dummayarray which you are getting from server side but if you want to get only one object than you can use find method it will return only one obj

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

let me know if you need anything else..

谢谢

这篇关于根据表单中的值在用户屏幕上显示角度数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！