时间戳

首页 > 解决方案 > 设置包含所有相关项目的标题，

angular - 设置包含所有相关项目的标题，

问题描述

我想显示一个有很多科目的学生列表，每个科目都有很多账单。我想在每个主题名称中设置标题，以显示与其相关的所有账单。现在我很难通过账单来区分主题，比如他们将再次调用主题的每张账单。

<h3>List of Student</h3>
<div *ngFor="let key of students | async; index as studentId">
  <h2>
    <a>
      {{key.studentId}}
    </a>.
    {{key.studentName}}
  </h2>
  <div *ngFor="let elements of key.subjectSS">
    <div *ngFor="let billDetail of elements.billSS">
      <b>Subject:</b><span [title]="'Học phí: ' + billDetail.price"> {{elements.subject.subjectName}}</span><br />
      <span>
        <b>Bill:</b> {{billDetail.price}} VNĐ<br />
      </span>
    </div>
  </div>
</div>

在此处输入图像描述

我的屏幕显示我的 Json

[
  {
    "subjectSS": [
      {
        "subject": {
          "studentSS": [],
          "subjectId": 1,
          "subjectName": "Math"
        },
        "billSS": [
          {
            "billId": 1,
            "price": 500,
            "reqStuSubId": 1
          },
          {
            "billId": 2,
            "price": 700,
            "reqStuSubId": 1
          },
          {
            "billId": 7,
            "price": 2400,
            "reqStuSubId": 1
          }
        ],
        "reqStuSubId": 1,
        "studentId": 1,
        "subjectId": 1
      },
      {
        "subject": {
          "studentSS": [],
          "subjectId": 2,
          "subjectName": "Geography"
        },
        "billSS": [
          {
            "billId": 6,
            "price": 1000,
            "reqStuSubId": 2
          },
          {
            "billId": 9,
            "price": 424,
            "reqStuSubId": 2
          }
        ],
        "reqStuSubId": 2,
        "studentId": 1,
        "subjectId": 2
      }
    ],
    "studentId": 1,
    "studentName": "Hung"
  },
  {
    "subjectSS": [
      {
        "subject": {
          "studentSS": [],
          "subjectId": 3,
          "subjectName": "Physical"
        },
        "billSS": [
          {
            "billId": 5,
            "price": 900,
            "reqStuSubId": 7
          },
          {
            "billId": 8,
            "price": 745,
            "reqStuSubId": 7
          }
        ],
        "reqStuSubId": 7,
        "studentId": 2,
        "subjectId": 3
      }
    ],
    "studentId": 2,
    "studentName": "Manh"
  },
  {
    "subjectSS": [],
    "studentId": 3,
    "studentName": "Long"
  }
]

标签： angular

解决方案

您必须更改 ts 文件中的 json，因为您不想在 html 中为相同的内容使用两个循环。

所以这是我的建议：

您的组件文件

  import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  data: any = [
    {
      "subjectSS": [
        {
          "subject": {
            "studentSS": [],
            "subjectId": 1,
            "subjectName": "Math"
          },
          "billSS": [
            {
              "billId": 1,
              "price": 500,
              "reqStuSubId": 1
            },
            {
              "billId": 2,
              "price": 700,
              "reqStuSubId": 1
            },
            {
              "billId": 7,
              "price": 2400,
              "reqStuSubId": 1
            }
          ],
          "reqStuSubId": 1,
          "studentId": 1,
          "subjectId": 1
        },
        {
          "subject": {
            "studentSS": [],
            "subjectId": 2,
            "subjectName": "Geography"
          },
          "billSS": [
            {
              "billId": 6,
              "price": 1000,
              "reqStuSubId": 2
            },
            {
              "billId": 9,
              "price": 424,
              "reqStuSubId": 2
            }
          ],
          "reqStuSubId": 2,
          "studentId": 1,
          "subjectId": 2
        }
      ],
      "studentId": 1,
      "studentName": "Hung"
    },
    {
      "subjectSS": [
        {
          "subject": {
            "studentSS": [],
            "subjectId": 3,
            "subjectName": "Physical"
          },
          "billSS": [
            {
              "billId": 5,
              "price": 900,
              "reqStuSubId": 7
            },
            {
              "billId": 8,
              "price": 745,
              "reqStuSubId": 7
            }
          ],
          "reqStuSubId": 7,
          "studentId": 2,
          "subjectId": 3
        }
      ],
      "studentId": 2,
      "studentName": "Manh"
    },
    {
      "subjectSS": [],
      "studentId": 3,
      "studentName": "Long"
    }
  ];

  constructor() {

  }

  ngOnInit() {
    this.data.map(x => {
      x.subjectSS.map(y => {
        let str = '';
        for (let i = 0; i < y.billSS.length; i++) {
          str += ((i === 0) ? '' : ',') + y.billSS[i].price;
        }
        y.subjectPrices = str;
      })

    })
    console.log(this.data);
  }

}

您的 HTML 文件 

<h3>List of Student</h3>
<div *ngFor="let key of data; index as studentId">
  <h2>
    <a>
      {{key.studentId}}
    </a>.
    {{key.studentName}}
  </h2>
  <div *ngFor="let elements of key.subjectSS">
    <b>Subject:</b><span [title]="'Học phí: ' + elements.subjectPrices">
      {{elements.subject.subjectName}}</span><br />
    <span>
      <div *ngFor="let billDetail of elements.billSS">

        <b>Bill:</b> {{billDetail.price}} VNĐ<br /></div>
    </span>
  </div>
</div>

这是输出

推荐阅读