时间戳

首页 > 解决方案 > 如何使用反应形式将传入值与角度视图绑定？

html - 如何使用反应形式将传入值与角度视图绑定？

问题描述

嗨，我从 API 获取这些值，我可以成功显示教师值，但我不知道如何在我的角度视图中使用“COURSES”的传入数组值？

这是来自 REST API 的响应

{
    "courses": [
        {
            "topic_covered": [
                "5ddfc24bbd5a910c4c969324",
                "5ddfc4e2ce2ae8276421306a",
                "5ddfc9553879b52154081c2e",
                "5ddfcb0e7d56a916289191b5",
                "5ddfdf5983f4cb0aa0785798",
                "5ddfdf8cc60f2321aceba246",
                "5de1203718079320b4d5c990",
                "5de1207e18079320b4d5c992"
            ],
            "_id": "5ddfc13d92eb1e27640b42b2",
            "degprog": "MCS",
            "session": "2017-21",
            "semester": "2nd",
            "c_code": "55",
            "c_title": "SE",
            "c_hours": "4234",
            "m_quiz": 30,
            "m_assign": 20,
            "c_coordinator": "Ali Abbas",
            "c_url": "www.CsinBestWay.com",
            "c_catelog": "catelog dont know",
            "c_tbook": "Cs In BestWay",
            "c_reference": "CsinBestWay",
            "c_goals": "To understand students ",
            "c_pre": "Special None",
            "m_lab": null,
            "m_mid": 75,
            "m_final": 75,
            "m_total": 200,
            "__v": 8
        }
    ],
    "_id": "5ddfc02c92eb1e27640b42af",
    "t_id": 1500,
    "t_name": " Abbasi",
    "t_desig": "Cs&IT",
    "t_dob": "2019-11-14T00:00:00.000Z",
    "t_email": "sabb@gmail.com",
    "t_pswd": "abc",
    "t_phone": 7375343,
    "t_quali": "sters",
    "t_gender": "male",
    "t_p_img": "",
    "t_address": "Muzad",
    "__v": 1
}

当我使用这个

 <tr>
        <th>Name</th>
        <td>{{teacher?.t_name}}</td>
   </tr>

这工作正常并显示 Name ，我如何使用 Courses 数组值？

标签： htmlarraysangulartypescript

解决方案

像这样的工作吗？

 <tr>
    <th>Name</th>
    <td>{{teacher?.t_name}}</td>
    <td>{{teacher?.courses[0]?.theValueYoUWantToUse}}</td>
 </tr>

您需要指定索引，因为课程是一个数组

这是一个小堆栈闪电战： https ://stackblitz.com/edit/angular-bctbwv

或者你可以在这样的课程上做一个 ngFor

enter code     <tr>
    <th>Name</th>
    <td>{{teacher?.t_name}}</td>
    <td><div *ngFor="let data of teacher.courses">{{data.session}}</div></td>
 </tr>

编辑：带有 ngFor 的 stackblitz 示例：https ://stackblitz.com/edit/angular-wuppjm

推荐阅读