Javascript 如何使选定值绑定到angular8中的表单

最初在ngOnInit（）中，我给出了要绑定到表单的第一个列表值，因此第一个值被填充到表单中，但右侧的第一项未被选中，我的意思是，即使选择了第一行值，也不会突出显示行中的第一项，但是如果我点击它，它就会被激活/高亮显示，并将激活类添加到特定的行中。 当我单击其他项目时，它不会将该行的值更改为表单，即使单击了第二行，它仍然保持在第一行的值中。 当我点击addnew时，通过将右侧的行推到底部，空值也不会被绑定

谁能帮我解决这个问题，或者给我一些建议，比如我哪里出了问题，这样我就可以在错误的一方工作

演示：

TS：（父组件）

HTML：（父组件）

---

所以在演示中，我希望第一行高亮显示，就像选中时显示的一样，并且第一个值会显示出来，然后当单击“添加新值”按钮时，通过按下新行下方的右侧行将新值绑定到表单，就像必须显示为用户正在添加新表单一样，并且他已经没有多少记录了。单击第二行时，我们应该能够看到第二行的详细信息。

以下是一个示例：

但我真的建议您看看《英雄之角之旅》（angular tour of heroes（）），并使用

[routerLink]

和

[routerLink Active]

检查路由是如何工作的。如果您使用这些选项并选择退出引导路由，则高亮显示将在开箱即用的情况下工作，并且不需要所有额外的代码（将在下面解释）

但要解决您当前的问题：

要将新用户推到列表顶部，请更改

  public addNewButton() {
    this.userList = [{"Id": 0,
        "agentCode": 1205,
        "userName": 'addNewButton',
        "firstName": "new",
        "middleName": '',
        "lastName": '2',
        "department": 'New department1',
  }]
     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.ts中选择锚点作为ViewChildren

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

要在添加新用户时执行相同操作，我们需要在用户添加到列表后运行更改检测循环，以便更新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();
    }
  }

---

非常感谢，它在演示中按预期工作，但当我单击“添加新”时，焦点必须放在新项目上，但在这里活动的是选定行和新获得的行。我的意思是，我在第二行单击“需要”，然后单击“添加新”，因此第一行（即新添加的行）和上一个选定行的焦点都被转移

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');
  }
}

            <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(SelectableAnchorDirective) selectableUsers: QueryList<SelectableAnchorDirective>;

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

  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();
    }
  }