激活的路由器链接无法与 ngModel 一起正常工作答案

【问题标题】：Router link active is not working properly with ngModel激活的路由器链接无法与 ngModel 一起正常工作
【发布时间】：2018-06-01 12:03:41
【问题描述】：

我正在处理路由并使用 routerLinkActive 使链接处于活动状态。在 html 中使用 ngModel 时链接未激活。

这是确切的场景..

在组件中，我正在调用返回一个对象或对象数组的 Web 服务。在 html 中，我将 ngModel 用于对象的字段。如果我使用字符串或数字等直接字段，路由器链接活动工作正常。但是当我尝试从对象访问字段时它不起作用。

这很奇怪。

这就是我想要做的。

ts：

export class MyComponent implements OnInit {
    headers;
  allLogs: Array<any> = [];
  selectedEntry: any;

    ngOnInit() {
        var token = localStorage.getItem('x-auth-token');
        this.headers = new Headers({
           'x-auth-token' : token
        });
        this.getData(this.headers);
    }

    getData(headers){
      this.exampleProvider.getAllEntries(headers)
      .subscribe(
        data => {
          this.allLogs = JSON.parse(data['_body'])
          this.selectedEntry = JSON.parse(JSON.stringify(this.allLogs[0]))
        },
        error => {
        }
      );
  }

  updateDate(event){
  }

}

html:

<p>{{selectedEntry | json}}</p>

<input class="form-control" type="date" [ngModel]="selectedEntry.date" name="selectedDate" (ngModelChange)="updateDate($event)">

当我在 ngModel 中使用 selectedEntry 时，它可以正常工作，但在检索日期后它无法正常工作。

需要帮助。

【问题讨论】：

标签： angular angular2-routing routerlinkactive

【解决方案1】：

自从 getData() 是异步调用。

在调用成功之前selectedEntry 将为空。

所以你可以做这些事情中的任何一个

使用隐藏输入字段

<input class="form-control" *ngIf="selectedEntry!=null" type="date" [ngModel]="selectedEntry.date" name="selectedDate" (ngModelChange)="updateDate($event)">

或

替换

selectedEntry:any;

与

selectedEntry:any={
    date:''   
}

【讨论】：