Angular:将参数传递给this.http.get()

Question

我有一个角度APP，需要从API动态获取数据。 当我使用静态 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>

如何使网址动态化?...我的意思是将 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);

但这不是工作。

Answer 1

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);