Как динамически назначать записи ресурсу с помощью Angular - PullRequest
Новая
       12

Как динамически назначать записи ресурсу с помощью Angular

0 голосов
/ 27 ноября 2018

Я пытаюсь реализовать требование / функцию в приложении, которое я создаю, и пытаюсь реализовать его.Я использую Angular 6 для создания пользовательского интерфейса, Lumen для API и MYSQL для постоянного слоя.

Требование:

  • Существует коллекцияобычных пользователей и пользователей-администраторов.
  • Существует набор "навыков".
  • Пользователи-администраторы могут "назначать" "навыки" пользователям.
  • Пользователи-администраторы могут добавлять/ редактировать / удалить основной список «навыков».

Мой текущий план на данный момент:

  • Создать таблицу базы данных «навыков» для хранениявсе имена навыков и их идентификатор.
  • Создание таблицы базы данных "skill_users" для хранения всех назначенных навыков для соответствующих пользователей.
  • Создание конечной точки для возврата всех "навыков" из таблицы базы данных, поскольку они будут динамическимиценности.
  • Создание конечной точки для пользовательского ресурса, который принимает свойство массива с именем «skill», которое содержит идентификаторы всех «навыков», которые должны быть назначены конкретному пользователю.

Бит IЯ борюсь с пользовательским интерфейсом для назначения "навыков" пользователям.Пользовательский интерфейс должен будет запросить список всех «навыков» и динамически отобразить их на странице в виде полей флажков в форме (этот бит я могу сделать).Но тогда мне нужен способ использовать эту динамически генерируемую форму, которая использует поля флажков для создания новой полезной нагрузки, и я не совсем уверен, как это сделать.

Этот 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>

Любая помощь будет оценена, надеюсь, я достаточно хорошо объяснил себя.

1 Ответ

0 голосов
/ 27 ноября 2018

Вы можете написать обработчик события клика на mat-checkbox и поместить каждый клик-навык в массив.Затем вы можете создать объект с двумя свойствами, например, id (идентификатор пользователя, которого мы хотим связать с навыками) и массив selected_skills, который у вас есть, и сохранить его.Примерно так:

skill.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>

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

Надеюсь, это помогло!

...