Angular组件函数中调用服务saveStudent实现随机选在场学生

解决方案 #

完全可以实现，只需调整以下几个关键点：

1. 开放服务方法的访问权限 #

当前saveStudent是私有方法，组件无法直接调用，需要把它改成public：

public saveStudent(student: Student) {
    localStorage.setItem('student', JSON.stringify(student));
}

2. 实现在场学生的过滤逻辑 #

假设你的AbsentListService还没有提供获取在场学生的方法，先补充这个逻辑（根据实际的缺勤字段调整过滤条件）：

// 在AbsentListService类中添加
public getPresentStudents(allStudents: Student[]): Student[] {
    // 示例：过滤掉标记为缺勤的学生，这里替换成你实际的判断逻辑
    return allStudents.filter(student => !student.isAbsent);
}

3. 重写selectRandomUser函数逻辑 #

更新组件中的方法，先筛选出在场学生，再随机选择，最后调用服务保存结果，同时修复原有的else语法错误：

selectRandomUser() {
    // 先获取所有在场学生
    const presentStudents = this.absentListService.getPresentStudents(this.student);
    
    // 处理没有在场学生的情况
    if (presentStudents.length === 0) {
        this.genderMessage = "Aucun utilisateur n'a été trouvé";
        console.log("没有在场学生");
        return;
    }

    // 随机选中一名在场学生
    this.selectedUser = presentStudents[Math.floor(Math.random() * presentStudents.length)];
    
    // 设置对应的提示语
    if (this.selectedUser.isWoman) {
        this.genderMessage = "Tu es la grande gagnante !";
        console.log("femme fonctionne");
    } else {
        this.genderMessage = "Tu es le grand gagnant !";
        console.log("homme fonctionne");
    }

    // 调用服务方法把选中的学生存入localStorage
    this.absentListService.saveStudent(this.selectedUser);
    
    console.log("选中的学生:", this.selectedUser);
}

4. 更新模板展示结果 #

修改HTML，让选中的学生信息和提示语能正常显示：

<main>
    <div class="launch">
        <button (click)="selectRandomUser()">🎰 Select a student 🎰</button>
    </div> 

    <div class="white-box-card">
        <div class="white-box">
            🌸
            <!-- 展示选中的学生信息 -->
            <div *ngIf="selectedUser">
                <h3>{{ selectedUser.name }}</h3>
                <p>{{ genderMessage }}</p>
            </div>
            <!-- 无在场学生时的提示 -->
            <div *ngIf="genderMessage && !selectedUser">
                <p>{{ genderMessage }}</p>
            </div>
        </div>
    </div>
</main>

内容的提问来源于stack exchange，提问作者Bergam