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

jmp7cifd 于 2021-06-17 发布在 Mysql

关注(0)|答案(1)|浏览(428)

我正试图在我正在构建的应用程序中实现一个需求/特性，我正在努力实现它。我使用angular6来构建ui，lumen用于api，mysql用于持久层。
要求是：
有普通用户和管理员用户的集合。
有一个“技能”集合。
管理员用户可以“分配”“技能”给用户。
管理员用户可以添加/编辑/删除“技能”的主列表。
我目前的计划是：
创建“skills”数据库表以存储所有技能名称和id。
创建“skills\u users”数据库表以存储分配给相应用户的所有技能。
创建端点以返回数据库表中的所有“技能”，因为它们将是动态值。
为用户资源创建端点，该资源采用名为“skills”的数组属性，该属性包含要分配给特定用户的所有“skills”的ID。
我正在努力解决的一点是为用户分配“技能”的ui。ui将需要请求所有“技能”的列表，并在页面上以复选框字段的形式动态显示它们（我可以这样做）。但是我需要一种方法来使用动态生成的表单，该表单使用checkbox字段来构造新的有效负载，我不太确定如何做到这一点。
这是我到目前为止得到的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 lumen Angular api-design

来源：https://stackoverflow.com/questions/53490519/how-to-assign-records-to-resource-dynamically-with-angular

1条答案

按热度按时间

mrphzbgm1#

您可以在mat复选框上编写一个click事件处理程序，并将每个单击的技能推送到一个数组中。然后您可以构建一个具有两个属性的对象，例如，id（我们要与技能关联的用户的id）和您所拥有的所选技能数组，并将其保存。像这样：
技能.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>

技能.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 => {
            ...
        })
}

希望这是有用的！

赞(0）回复(0）举报 2021-06-18

我来回答

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

1条答案

相关问题

热门标签

最新问答