页面初始角度 4 上的默认数据答案

【问题标题】：default data on page init angular 4页面初始角度 4 上的默认数据
【发布时间】：2018-04-25 15:20:38
【问题描述】：

我在视图中有一个按钮，其中包含我从后端检索的不同名称的下拉列表。我正在显示我默认检索的名字。当他们更改下拉列表中的选项时，我在组件中有一个方法来获取数据。我添加了一个点击事件，当下拉选项更改时检索数据。

当我更改下拉菜单中的选项时，我能够从 getFinalData 获取数据，因为我有点击事件。但是我想在初始页面加载时显示第一项的数据。如何在 ngOninit 上显示名字的数据？

组件.ts

ngOnInit() {
  this.getFinalData(this.name);
}
getnames() {
  this.http.get("**").subscribe(data => {});
}
getFinalData(name) {
  this.http.get("**" + "/" + name).subscribe(data => {
    console.log(data);
  });
}

html

<button id="selected" type="button" class="btn btn-secondary dropdown-toggle data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{selected}}</button>
  <div class="dropdown-menu arrow form-group">
    <a class="dropdown-item" *ngFor="let data of data" (click)="getFinalData(data?.name)">{{data?.name}}
    </a>
  </div>
</button>

【问题讨论】：

默认数据保存在哪里？您可以使用 'first' 选项来显示 ngFor 中的第一项。像这样： {{(firstData?data.name : '')}}
我可以在下拉按钮中显示第一项。我想默认显示与第一项关联的数据
是来自“getFinalData”的数据吗？我不知道您的默认数据存储在哪里/如何存储
是的，我从 getFinalData 获取数据。当我更改下拉菜单中的选项时，我能够获取数据，因为我有点击事件。但是我想在初始页面加载时显示第一项的数据
抱歉，这不是很清楚。你如何填充你的下拉菜单？是否有另一个功能可以带来该信息？现在似乎 this.name 在您单击下拉列表时已设置，但似乎也是从同一个调用中填充的，所以我不确定这是如何工作的。你能展示你所有的代码吗？

标签： angular default dropdown

【解决方案1】：

ngOnInit() {
        this.getNames();
      }

getnames() {
    this.http.get('**')
      .subscribe(namesData => {
      if(this.name==""){
        //assume that this.name is "" or null on init.
          this.getFinalData(namesData[0].name)
          .subscribe(nameInfo=>{})
       }
 });

    getFinalData(name) {
              this.http.get('**' + '/' + name)
              .subscribe(data => {
               console.log(data)
            }

   onSelectClick(name:string){
      this.getFinalData(name)
   }

【讨论】：