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

时间:2018-04-25 15:20:38

标签: angular default dropdown

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

当我在下拉列表中更改选项时,我能够从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>

1 个答案:

答案 0 :(得分: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)
   }