mysql - 如何使用 Angular 将记录动态分配给资源

Question

我正在尝试在我正在构建的应用程序中实现一个要求/功能，但我正在努力实现它。我使用 Angular 6 构建 UI，使用 Lumen 构建 API，使用 MYSQL 构建持久层。

要求是:

• 有普通用户和管理员用户的集合。
• 有一系列“技能”。
• 管理员用户可以向用户“分配”“技能”。
• 管理员用户可以添加/编辑/删除“技能”主列表。

到目前为止我目前的计划:

• 创建“技能”数据库表来存储所有技能名称和 ID。
• 创建“skills_users”数据库表来存储分配给各个用户的所有技能。
• 创建端点以从数据库表中返回所有“技能”，因为它们将是动态值。
• 为用户资源创建端点，该端点采用名为“skills”的数组属性，其中包含要分配给特定用户的所有“技能”的 ID。

我遇到的问题是为用户分配“技能”的用户界面。用户界面将需要请求所有“技能”的列表，并将它们作为表单中的复选框字段动态显示在页面上(我可以做到这一点)。但随后我需要一种方法来使用动态生成的表单，该表单使用复选框字段来构造新的有效负载，但我不太确定如何做到这一点。

这是我到目前为止得到的 HTML 代码，但它并不完整，因为我不知道如何完成它:

<div class="mb-1" *ngFor="let additional_skill of additional_skills; let i = index">
    <mat-checkbox [(ngModel)]="skills[i]" name="{{ additional_skill.id }}">{{ additional_skill.name }}</mat-checkbox>
</div>

任何帮助将不胜感激，我希望我已经很好地解释了自己。

Answer 1

您可以在 mat-checkbox 上编写单击事件处理程序，并将每个单击的技能推送到数组中。您可以构建一个具有两个属性的对象，例如 id(我们想要与技能关联的用户的 ID)和您拥有的 selected_skills 数组并保存它。像这样的事情:

技能.component.html

<div class="mb-1" *ngFor="let additional_skill of additional_skills;>
    <mat-checkbox (click)="selectSkill(additional_skill.skill_id)" name="{{ additional_skill.id }}"> 
       {{additional_skill.name }}
    </mat-checkbox>
</div>

<button (click)="saveUserSkills()">Save skills for this user</button>

技能.组件.ts

skills = [];
userId = 25; // lets assume that this is id of a user that we want to "upgrade"

selectSkill(skillId: number) {
    this.skills.push(skillId);
}

saveUserSkills(){
    let payload = {
        id: this.id,
        selected_skills: this.skills
    };

    this._userSkillsService.saveSkills(payload)
        .then(response => {
            ...
        })
        .catch(err => {
            ...
        })
}

希望这对您有帮助!