Question

我正在从PHP API提取数据，但是subscription.ts之后的变量在component.ts中为空，但是在component.html中使用时它显示数据。我想从API提取后进行修改。

服务中：

get_tournaments(){
    return this.http.get("http://localhost/Website/api/tournament/read.php")
    .map(res=>res.json());
  }

在component.ts中：

tournaments:Object[] = [];

ngOnInit() {  
    this.ongoing_ser.get_tournaments() 
    .subscribe(value=>this.tournaments=value);
    console.log("Main:",this.tournaments); <-- this is empty
}

在component.html中：

it displays everything correct as required.

我想修改从API提取的数据，然后以html显示

Answer 1

@Sudhindra Purohit Javascript是同步的，因此它将等待完成订阅您的请求。这样它将在控制台中返回空。

如果您要修改数据，则可以按照以下步骤操作

 this.ongoing_ser.get_tournaments() 
    .subscribe(value=> { this.tournaments=value;
     // DO here what ever you want with tournaments
     this.tournaments = this.tournaments.map(tour => {
       console.log(tour);
      }
 });

Answer 2

您需要将值分配给组件变量，然后使用插值{{}}

对其进行更改或显示。

在componenet.ts

ngOnInit() {

    this.ongoing_ser.get_tournaments() 
        .subscribe(
            (data:any)=>{
                this.data=data;
                //you can do the data modification here 
            })

  }

在component.html

中

<div>{{data}}</div>

这将显示HTML数据

在Angular4中，来自.subscribe的数组在component.ts中为空

2 个答案: