如何使用 Angular 动态地将记录分配给资源答案

【问题标题】：How to assign records to resource dynamically with Angular如何使用 Angular 动态地将记录分配给资源
【发布时间】：2018-11-26 23:15:55
【问题描述】：

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

要求是：

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

我目前的计划：

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

我正在努力解决的问题是用于将“技能”分配给用户的 UI。 UI 需要请求所有“技能”的列表，并将它们作为表单中的复选框字段动态显示在页面上（我可以做到这一点）。但是我需要一种方法来使用动态生成的表单，该表单使用复选框字段来构造新的有效负载，但我不太确定该怎么做。

这是我目前得到的 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>

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

【问题讨论】：

标签： mysql angular lumen api-design

【解决方案1】：

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

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>

skills.component.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 => {
            ...
        })
}

希望这对您有所帮助！

【讨论】：