Question

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

然后教师将按下该按钮，以显示当天哪些学生应该上课。这是一个出勤/缺勤监控应用程序。

但是，我正在测试*ngFor来做我的列表，并且由于数据存储为3个对象，每个对象都有一个学生的信息，所以*ngFor将动态创建三个按钮-实际上，因为三个学生都在同一班上，我只需要一个按钮即可。

仅需为当天教师的下一堂课创建下一个按钮。

我猜这是一个算法问题，或者可能要进行其他查询才能从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，即已登录的老师。这将为您提供老师所上课的总清单。

要获取特定班级的学生列表，您可以执行以下操作：SELECT * FROM Registration WHERE classId=Y AND teacherId=X Y是从上一个查询中检索到的班级ID之一。

希望这可以帮助您朝正确的方向前进！

* ngFor需要为每个不同的对象节省1个btn，但要将相同的对象值放在同一个btn中

1 个答案: