Как сделать, чтобы выбранные значения привязывались к форме в angular8

Question

Изначально в ngOnInit () я дал первое значение списка для привязки к форме, поэтому первое значение заполняется в форме, но первый элемент справа не выбран, я имею в виду, что даже значение первой строки выбранное, он не выделяет первый элемент в строке, но если я щелкаю по нему, он становится активным / подсвеченным с добавлением активного класса в конкретную строку. Когда я нажимаю на другие элементы, он не изменяет значение этой строки на форму, он все равно остается в значениях первой строки, даже если щелкнуть по второй строке. Когда я нажимаю на кнопку добавления нового, даже тогда пустые значения не связываются, толкая строки справа внизу.

Может кто-нибудь помочь мне решить эту проблему или дать мне предложения, например, где я нахожусь идет не так, чтобы я мог работать с неправильной стороны.

DEMO: DEMO

TS: (родительский компонент)

public selectedUser(data) {
  this.userDetails = data;
  this.userInitial = true;
  }


  public addNewButton() {
    this.userList = [{"Id": 0,
        "agentCode": 1205,
        "userName": 'addNewButton',
        "firstName": "new",
        "middleName": '',
        "lastName": '2',
        "department": 'New department1',
  }]
     this.userDetails = this.userList[0]
  }

HTML :( Родительский компонент)

 <app-user-table [userDetails]="userDetails" (goListingPage)="showUserDetails($event)" ></app-user-table>

<div class="col-4">
        <div class="nav nav-pills vertical-tabs flex-column scrollable" id="v-pills-tab" role="tablist"
            aria-orientation="vertical" *ngIf="userList && userList?.length > 0">
            <a class="nav-link" id="user_{{user.Id}}" data-toggle="pill" href="#tab-user_{{user.Id}}" role="tab"
                aria-controls="tab-user_1" aria-selected="true" *ngFor="let user of userList" (click)="selectedUser(user)">
                <h6 class="font-weight-bold"><span>{{user.firstName}}</span>
                    <span>{{user.lastName}}</span></h6>
                <span class="d-block font-sm">{{user.department}}</span>
                <span class="d-block font-sm">{{user.title}}</span>
            </a>
        </div>
    </div>

Итак, в демоверсии я ожидаю, что первая строка будет выделена так, как она отображается при выборе и отображается первое значение, а затем при нажатии на кнопку добавления новой кнопки new значение, которое нужно связать с формой, нажав правую строку ниже новой строки, как будто это должно появиться, как будто пользователь добавляет новую форму, и у него уже есть несколько записей. Если щелкнуть по 2-й строке, мы сможем увидеть детали 2-й строки.

Answer 1

Вот пример того, как вы можете это сделать: https://stackblitz.com/edit/github-ck3u8u-wns7vr

Но я очень рекомендую вам взглянуть на angular тур героев ( https://angular.io/tutorial) и проверьте, как работает маршрутизация, используя [routerLink] и [routerLinkActive]. Если вы используете их и отказываетесь от маршрутизации bootstrap, выделение будет работать «из коробки», и весь дополнительный код, который будет объяснен ниже, не понадобится.

Но для решения Ваша текущая проблема:

Чтобы Pu sh ваши новые пользователи в верхней части списка, измените

  public addNewButton() {
    this.userList = [{"Id": 0,
        "agentCode": 1205,
        "userName": 'addNewButton',
        "firstName": "new",
        "middleName": '',
        "lastName": '2',
        "department": 'New department1',
  }]
     this.userDetails = this.userList[0]
  }

на

  public addNewButton() {
    this.userList = [{"Id": 0,
        "agentCode": 1205,
        "userName": 'addNewButton',
        "firstName": "new",
        "middleName": '',
        "lastName": '2',
        "department": 'New department1',
  }, ...this.userList]
     this.userDetails = this.userList[0]
  }

Это будет предшествовать Элемент для вас уже существующий список.

Далее мы хотим решить проблему выделения первого элемента при загрузке и новых элементов после того, как они были созданы нажатием кнопки. Для этого нам нужно выбрать привязки вашего правого списка как ViewChildren. К сожалению, невозможно выбрать html нативные элементы в качестве ViewChildren, поэтому мы создаем фиктивную директиву, которая применяется к якорям и может быть выбрана с помощью ViewChildren.

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appSelectableAnchor]'
})
export class SelectableAnchorDirective {

  constructor(
    private elementRef: ElementRef<HTMLAnchorElement>
  ) { }

  public removeBootstrapActive() {
    this.elementRef.nativeElement.classList.remove('active');
  }

  public setBootstrapActive() {
    this.elementRef.nativeElement.classList.add('active');
  }
}

эта директива затем применяется к якоря в app.component.html

            <a class="nav-link" id="user_{{user.Id}}" data-toggle="pill" href="#tab-user_{{user.Id}}" role="tab"
                aria-controls="tab-user_1" aria-selected="true" *ngFor="let user of userList" (click)="selectedUser(user)" appSelectableAnchor>

Теперь мы можем выбрать якоря как ViewChildren в app.component.ts

 @ViewChildren(SelectableAnchorDirective) selectableUsers: QueryList<SelectableAnchorDirective>;

Чтобы выбрать первый после загрузки, мы проверяем ViewChildren в ngAfterViewInit (в ngOnInit не гарантируется, что ViewChildren уже загружены), если они есть, мы выбираем первое.

  ngAfterViewInit() {
    if (this.selectableUsers.length > 0) {
      this.selectableUsers.first.setBootstrapActive();
    }
  }

Чтобы сделать то же самое при добавлении нового пользователя, нам нужно запустить цикл обнаружения изменений после того, как пользователь был добавлен в список, чтобы обновить ViewChildren. После этого мы можем выделить новый элемент в том же ключе, что и в ngAfterViewInit.

По какой-то причине активный класс задерживается, если вставлен новый элемент. Поэтому мы удаляем его вручную перед добавлением нового пользователя. В целом метод addNewButton выглядит следующим образом:

  public addNewButton() {
    if (this.selectableUsers.length > 0) {
      this.selectableUsers.first.removeBootstrapActive();
    }
    this.userList = [{"Id": 0,
        "agentCode": 1205,
        "userName": 'addNewButton',
        "firstName": "new",
        "middleName": '',
        "lastName": '2',
        "department": 'New department1',
  }, ...this.userList]
     this.userDetails = this.userList[0]
    this.cdr.detectChanges();
    if (this.selectableUsers.length > 0) {
      this.selectableUsers.first.setBootstrapActive();
    }
  }