Question

我有一个名为teachers的api，如下所示：

老师：

[
  {
    "id": "01",
    "teacherName": "Binky Alderwick",
    "studentIds": [
      "010",
      "024",
      "031"
    ],
    "totalStudents":"20"
  },
  {
    "id": "02",
    "teacherName": "Basilio Gregg",
    "studentIds": [
      "041",
      "075"
    ],
     "totalStudents":"10"
  },
  {
    "id": "03",
    "teacherName": "Binky Alderwick",
    "studentIds": [
      "075",
      "048",
      "035"
    ],
     "totalStudents":"40"
  }
]

在学生JSON中。 studentIds内部的strings属性是多个array。

我如何计算这些字符串并与属性totalStudents进行比较并显示可用的学生，如下所示：

Stackblitz Demo

Answer 1

在您的html中使用它

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{teacher.teacherName }}</td>
    </tr>
    <tr>
        <td>Number of Students</td>
        <td>{{ teacher.studentIds.length }}</td>
    </tr>   
    <hr>
</div>

如果要在更新的问题中使用该格式，则可以在下面使用

   <h4>Teachers</h4>
    <div class="cust-detail" *ngFor="let teacher of teachers">
        <tr>
            <td>Name</td>
            <td>{{teacher.teacherName }}</td>
        </tr>
        <tr>
            <td>Number of Students</td>
            <td>{{ teacher.studentIds.length }}/{{teacher.totalStudents}} </td>
        </tr>   
        <hr>
    </div>

Answer 2

如果需要显示学生人数，可以在模板中使用它：

{{teacher.studentIds.length}}/{{teachers.totalStudents}}

请记住，您可以通过数据绑定访问数据，因此可以显示所需的任何类型的数据。

Answer 3

您可以像这样获取数组中的项目数：

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{teacher.teacherName }}</td>
    </tr>
    <tr>
        <td>Number of Students</td>
        <td>{{teacher.studentIds.length}}</td>
        <td></td>
    </tr>   
    <hr>
</div>

Answer 4

您可以遍历教师列表，还可以将属性“ availableStudents”添加为字符串，并且可以按如下所示进行设置，并在任何需要的地方使用

for(let teacher of teacherList)
{
 teacher.availableStudents=`${teacher.studentIds.length}/{teacher.totalStudents}`}
}

然后您可以自由地在HTML中使用它。

最好将此代码添加到类似computeAvailableStudent的函数名称中（为了更好的代码可读性），然后从服务器获取列表后，调用此函数，以便您的列表可以使用

最好将其计算为ts文件而不是html，以便进行测试

计算并显示数组中的可用字符串

4 个答案: