изменение значения для div изменяет значения для всех div в al oop в ngfor angular 8 - PullRequest
Новая
       182

изменение значения для div изменяет значения для всех div в al oop в ngfor angular 8

0 голосов
/ 07 августа 2020

У меня есть сценарий, где по умолчанию на экране отображается кнопка добавления. При нажатии кнопки добавления появляется раскрывающийся список, заменяющий кнопку добавления (я использую там условие ngIf).

Существует список таких кнопок добавления, который находится под условием * ngFor.

component. html

 <li class="" *ngFor="let data of arr.count">
                    <a href="javascript: void(0);">
                      
                      <div class="media" *ngIf="arr.userId != EditId" >
                        <div class="media-body overflow-hidden">
                          <h5 class="text-truncate font-size-14 mb-1">
                            Add User
                          </h5>
                 
                        </div>
                        <div
                          class="font-size-21 add-button"
                          (click)="editUser(arr.userId)"
                        >
                          <i class="bx bx-plus-circle"></i>
                        </div>
                      </div>

                      <div class="" *ngIf="arr.userId == EditId">
                        <div class="form-group mb-4">
                          <ng-select
                            [items]="selectValue"
                            bindLabel="value"
                            bindValue="metaId"
                            [(ngModel)]="userModel.user"
                            (ngModelChange)="
                              hideUser(
                                arr.userId,
                                userModel.user
                              )
                            "
                          ></ng-select>
                        </div>
                      </div>
                    </a>
                  </li>

component.ts 

EditId: any = ''
....
...
...
ngOnInit(){
}
..
..
editUser(val: any) {
    this.EditId = val
    this.loadUserList()
  }

  hideUser(id, userId) {
    this.EditId = ''
  }

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

Что мне не хватает?

Я обновил свой код. Но теперь первый добавленный пользователь всегда отображается в раскрывающемся списке. Остальное работает. обновленный код: 

 <li class="" *ngFor="let data of arr.count">
                        <a href="javascript: void(0);">
                          
                          <div class="media" *ngIf="data.userId != EditId" >
                            <div class="media-body overflow-hidden">
                              <h5 class="text-truncate font-size-14 mb-1">
                                Add User
                              </h5>
                     
                            </div>
                            <div
                              class="font-size-21 add-button"
                              (click)="editUser(data.userId)"
                            >
                              <i class="bx bx-plus-circle"></i>
                            </div>
                          </div>

                          <div class="" *ngIf="data.userId == EditId">
                            <div class="form-group mb-4">
                              <ng-select
                                [items]="selectValue"
                                bindLabel="value"
                                bindValue="metaId"
                                [(ngModel)]="userModel.user"
                                (ngModelChange)="
                                  hideUser(
                                    arr.userId,
                                    userModel.user
                                  )
                                "
                              ></ng-select>
                            </div>
                          </div>
                        </a>
                      </li>
...