javascript - *ngFor 需要为每个不同的对象生成 1 个 btn，但将相似的对象值放在同一个 btn 中

Question

我正在创建一个应用程序，它将在选定的一天为老师列出类(class)，每个类(class)都是屏幕上的一个按钮。此列表是使用 *ngFor 制作的，并从 ts 文件中提取数据，该文件最初来自 PHP/数据库查询。

然后老师会按下按钮以显示当天哪些学生应该上课。这是一款出勤/缺勤监控应用。

但是，我正在测试 *ngFor 来制作我的列表，因为数据存储为 3 个对象，每个对象都有一个学生的信息，所以 动态创建了三个按钮>*ngFor - 事实上，由于三个学生在同一个类(class)，我只需要一个按钮。

只需要为老师当天的下一节课创建下一个按钮。

我猜这是一个算法问题，或者可能需要进行不同的查询才能从 SQL 获取数据。我不知道。

我迷路了

HTML

<ion-list>
    <ion-card padding *ngFor="let cour of planning; let i = index" (click)="showStudents($event, i)">
        <h2>{{ cour.cours }}</h2>
        <p>{{ cour.time }}</p>
        <p>{{ cour.date }}</p>
        <p>{{ cour.lieux }}</p>
        <p>{{ cour.duration }}</p>
    </ion-card>
</ion-list>

服务

getCoursList(date, idIntervenant) {
    return this.http.post('http://localhost/Attendance App/myApp/src/app/api/getCours.php?id='+idIntervenant,
        { date, }).subscribe(data => {
            console.log(Object.values(data));
            let planningData = Object.values(data);
            const grabArray = planningData[0];
            const id = grabArray.intervenant;
            if (id !== undefined) {
                // console.log('test array', id);
                let navExtras: NavigationExtras = { 
                state: {
                    planning: planningData
                }
                }
                this.router.navigate(['/cours/', id], navExtras);
            };
    },
    error => {
        console.log(error);
    });
}

PHP查询数据库

if (isset($_POST["date"])) {
    // $id = $_POST["id"];
    $origDate = date("Y-m-d", strtotime($_POST['date']));
    $date = $origDate;
    $id = $_GET['id'];

    $stmt = $conn->prepare("SELECT * FROM planning WHERE intervenant = :id AND date = :date");
    $stmt->execute([':id' => $id, ':date' => $date]);

    if ($stmt->rowCount() > 0) {
        $output = array();
        $output = $stmt->fetchAll();
        echo json_encode($output);
    } else {
        $errors = "No data found for this date";
        echo json_encode($errors);
    }
    // $conn->close();
}

从 PHP 查询接收到的数据 - 1 个包含 3 个对象的数组

[object Array]: [Object, Object, Object]

0: Object
cours: "Suivi individuel"
date: "2019-07-06"
duration: "1h30"
etudiant: "james ross"
id_planning: 19
intervenant: "2"
lieux: "Nice 2"
time: "12:00"

__proto__: Object

1: Object
cours: "Suivi individuel"
date: "2019-07-06"
duration: "1h30"
etudiant: "Tupac Shakur"
id_planning: 20
intervenant: "2"
lieux: "Nice 2"
time: "12:00"

__proto__: Object


2: Object
cours: "Suivi individuel"
date: "2019-07-06"
duration: "1h30"
etudiant: "Joyner lucas"
id_planning: 21
intervenant: "2"
lieux: "Nice 2"
time: "12:00"

__proto__: Object
length: "3"

上面的三个学生都在同一时间去同一个类，所以我只想动态生成一个按钮。

如果那天老师有第二节课，它会生成第二个按钮，依此类推。

目前没有错误信息，我只是没有得到想要的结果。

Answer 1

看来您可能需要以不同方式构建数据库。与其在计划表中为每个学生排一行，不如考虑采用以下结构:

Table Student:
- studentId
- name

Table Teacher:
- teacherId
- name

Table Class:
- classId
- name
- description
- schedule (not sure what the format of this would be,
    but using it your code should be able to determine the next meeting of the class)

Table Registration (each row in this table represents a student enrolled in the class):
- classId
- teacherId
- studentId

然后您的查询变为 SELECT * FROM Class WHERE teacherId=X X 是已登录的教师。这将为您提供该教师所类的总列表。

要获取特定类(class)的学生列表，您可以执行以下操作:SELECT * FROM Registration WHERE classId=Y AND teacherId=X Y 是从先前查询中检索到的类(class) ID 之一。

希望这能帮助您朝着正确的方向前进!