Question

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

要求是：

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

我目前的计划：

创建“技能”数据库表以存储所有技能名称和ID。
创建“ skills_users”数据库表，以将所有分配的技能存储到各个用户。
创建端点以从数据库表返回所有“技能”，因为它们将是动态值。
为用户资源创建终结点，该终结点具有名为“ skills”的数组属性，该属性包含要分配给特定用户的所有“ 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>

任何帮助将不胜感激，希望我对自己的解释足够好。

Answer 1

您可以在mat-checkbox上编写一个click事件处理程序，并将所有单击的技能推入数组。比起您可以构建具有两个属性的对象，例如，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 => {
            ...
        })
}

希望这对您有所帮助！

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

1 个答案: