页面初始化的默认数据 angular 4

Question

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

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

component.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>

Answer 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)
   }

页面初始化的默认数据 angular 4

default data on page init angular 4

default

dropdown

angular