时间戳

首页 > 解决方案 > Angular：将参数传递给 this.http.get()

angular - Angular：将参数传递给 this.http.get()

问题描述

我有一个需要从 API 动态获取数据的 Angular 应用程序。当我使用静态 URL 时，它可以正常工作。

这是我的代码

service.ts

export interface MachineData {
  name: string;
  status: string;
}

@Injectable()
export class MachineService {
  BASE_URL = 'example.com/api/v1/id/1';

  constructor(private http: HttpClient) { }

  getMachineData() {
    return this.http.get(this.BASE_URL);
  }
}

component.ts

showMachine() {
    this.machineService.getMachineData()
    .subscribe((data: machineData) => this.machineData = {
        status: data['status'],
    });
}

markers: marker[] = [
    {
        id: 1,
        name: "Marker A",
        lat: -6.949065,
        lng: 107.592339,
    },
    {
        id: 2,
        name: "Marker B",
        lat: -6.935582,
        lng: 107.610037,
    }
]

component.html

<agm-marker
    *ngFor="let m of markers; let i = index"
    (markerClick)="showMachine(m.id, i)"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="m.name">

    <agm-info-window>
        <strong>
            <p>Status : {{machineData.status}}</p>
        </strong>
    </agm-info-window>
</agm-marker>

如何使 URL 动态化？...我的意思是将 ID 添加到 URL。

例子：

由此

return this.http.get(this.BASE_URL);

对此

return this.http.get(this.BASE_URL + id);

所以我可以通过 id 检索数据。已经尝试这样做：

在我的component.html

(markerClick)="showMachine(m.id)"

在我的component.ts

showMachine(id: number) {
    this.machineService.getMachineData(id: number)
    .subscribe((data: machineData) => this.machineData = {
        status: data['status'],
    });
}

和我的service.ts

return this.http.get(this.BASE_URL + id);

但这是行不通的。

标签： angular

解决方案

id 是一个数字，URL 是一个字符串。

因此，您希望在执行“url + id”之前先将 id 转换为字符串。

即这样的事情确实有效。如果没有“toString”，您将在串联中得到“NaN”。

let url: string;
let id: number;

id = 5
url = "http://something/";

let result = url + id.toString();

console.log(result);

推荐阅读