Question

如何在循环的表组件中显示“ empName”和此JSON的其他详细信息？

我正在使用第三方API，当我将loyeeID发送到API URL时，该API提供了一个嵌套的JSON对象。

订阅后，我将响应存储在变量“ AllPostedJobs”中

{
    "status": "All Jobs",
    "result": [
        {
            "_id": "5c90fd3cfc7f3b0017803319",
            "job_title": "Web Designer",
            "job_desc": "test description ...",
            "location": "Mangalore",
            "experiance": "Freshers",
            "job_type": "Full-Time",
            "salary_package": "3L",
            "job_keywords": "Photoshop, Illustrator",
            "email_id": "hr@shreemithra.com",
            "employerID": "5c7e99c2a7a9eb00174de2b2",
            "company_name": "Shreemithra Designs",
            "AppliedStudentDetails": [
                {
                    "_id": "5c9393c1a918d60017de7e55",
                    "empName": "Anup",
                    "empID": "5c939375a918d60017de7e53",
                    "job_title": "Web Designer"
                }
            ],
            "__v": 1
        },
        {
            "_id": "5c913570cb78a100177ab23a",
            "job_title": "Full Stack Developer",
            "job_desc": "htjhsv dhsd jh jds fjshgdfkhsdmhfd;lw eiwiwemsd. This is a sample job description.",
            "location": "Pune",
            "experiance": "2 Years",
            "job_type": "Part-Time",
            "salary_package": "8L - 10L PA",
            "job_keywords": "Angular, Node JS, React, HTML5. CSS3",
            "email_id": "info@shreemithra.com",
            "employerID": "5c7e99c2a7a9eb00174de2b2",
            "company_name": "Shreemithra Designs",
            "AppliedStudentDetails": [
                {
                    "_id": "5c9393c9a918d60017de7e56",
                    "empName": "Anup",
                    "empID": "5c939375a918d60017de7e53",
                    "job_title": "Full Stack Developer"
                },
                {
                    "_id": "5ca60fa5ba17730017182ca8",
                    "empName": "Amit Pateriya",
                    "empID": "5c7795acfd39640017ca4c37",
                    "job_title": "Full Stack Developer"
                }
            ],
            "__v": 2
        }
    ]
}

Answer 1

您可以通过将HTML模板中的控件绑定到组件的属性来绑定显示数据。

显示组件属性的最简单方法是通过插值绑定属性名称。通过插值，您可以将属性名称放在视图模板中，并用双花括号括起来：{{AllPostedJobs.status}}。

<div  id="result-container" *ngFor="let record of AllPostedJobs.result">
   <another-component [record]= "record"></another-component>
</div>

或者根据您的需要，您可以将整个结果数据移交给另一个组件。

现在，您的另一个组件应该已定义@Input来处理传入的数据：

export class AnotherComponent {
    @Input() record: Array<any>;

在另一个组件模板中：

<div *ngFor="let student of record?.AppliedStudentDetails">
      <span>{{student.empName}}</span>
      <span [innerText]="student.job_title"></span>
    </div>

Answer 2

最简单的方法是，当您从api接收数据然后将其发送到函数，然后应用多次循环通过添加键来更改数据数据的开头以及该值的例子

var data = [{"id":1, "name":"smith","applicant":{"roll": 32,"class":10}}];
data[0].applicantRoll = data[0].applicant.roll;
data[0].applicantClass = data[0].applicant.class;

现在您可以轻松申请* ng了，试试看。

如何使用Angular 7

2 个答案: