У меня есть список ролей, который имеет идентификатор, имя, parent_id (self one) в JSON.

roles

Я отображаю все роли с их именем и родителем, где parent - это входное значение выбора, которое при загрузке показывает родительское имя, используя выбранную опцию, с идентификатором родителя, совпадающим с идентификатором роли.

<ng-container *ngFor="let role of roles">
    <tr>
     <td>{{role.name}}</td>
     <td>
     <select (change)="changeParent($event)">
         <option></option>
         <ng-container *ngFor="let parent of roles">
               <option [selected]="role.parent==parent.id" 
                       [ngValue]="roles" [value]="parent.id">
                 {{parent.name}}
               </option>
         </ng-container>
     </select>
   </td>
   </tr>
</ng-container>

При изменении параметра я хочу получить доступ к ngValue и значению параметра, выбранного в файле TS, чтобы обновить родительский элемент роли в вызове API, поскольку я получаю идентификатор роли и родительский идентификатор, с которым я можно нажать патч.

0
Srinivas Jayaram

3 ответа

Самый простой способ сделать это - использовать ngModel в раскрывающемся списке select , чтобы связать parent_id . Таким образом, вам даже не нужно указывать атрибут selected , так как ngModel уже связан с parent_id и changeParent также не потребуется, так как обновление выпадающего списка будет динамически обновлять role .

<select [(ngModel)]="role.parent_id">
    <option *ngFor="let parent of roles" [ngValue]="parent.id">
        {{parent.name}}
    </option>
</select>

Я немного изменил HTML-часть. Добавлен множественный в выбор ввода. Модель назначается на основе имени роли selectedRoles [role.name] , поэтому всякий раз, когда вы выбираете несколько ролей в качестве родительских, она вызывает функцию changeParent ($ event) и на консоли , вы сможете увидеть, какую роль содержит какие родители.

HTML Output

Console Output

< Сильный > app.components.html :

<ng-container *ngFor="let role of roles">
  <tr>
    <td>{{role.name}}</td>
    <td>
      <select multiple [(ngModel)]="selectedRoles[role.name]" (ngModelChange)="changeParent($event)">
        <ng-container>
          <option *ngFor="let role of roles" [selected]="selectedRoles[role.name].indexOf(role.id)" [value]="role.id">
            {{role.name}}
          </option>
        </ng-container>
      </select>
    </td>
  </tr>
</ng-container>

app.components.ts :

export class AppComponent implements OnInit {

  // assuming roles is the list you have stated 
  // in the problem description

  roles = [
    {
      id: 1,
      name: 'Admin',
      parent_id: 1
    },
    {
      id: 2,
      name: 'User',
      parent_id: 2
    },
    {
      id: 3,
      name: 'Guest',
      parent_id: 3
    }
  ];

  // selectedRoles will be the model for the select
  // input in form

  selectedRoles = {};

  ngOnInit(): void {
    // calling the initRolesModel function
    this.initRolesModel();
  }

  initRolesModel() {
    // mapping the parent roles with role name
    this.roles.forEach((role: any) => {
      this.selectedRoles[role.name] = [role.parent_id];
    });
  }

  changeParent($event) {
    console.log(this.selectedRoles);
  }

}

Дайте время, измените код, как вам нужно. Я создал карту между ролью и их родительскими ролями из исходного списка ролей.

Если вы хотите обновить родительские роли, поступающие с сервера, вам может потребоваться выполнить некоторые дополнительные действия, чтобы заставить работать тот же код.

Надеюсь это поможет.

Напишите функцию (click) в теге option примерно так (click) = SomeFunction (role.id, parent.id)

58510830