带有 Angular 的 NativeScript 将参数传递给 url

Question

我正在尝试将参数传递给 URL 并显示基于传递给 URL 的参数的信息。我有一个省份列表，我想做的是当用户单击某个特定省份时，我想将该省份传递给 URL 并显示属于被单击省份的地区。我不确定我做错了什么，当我按一个省时没有任何反应，也没有加载。

示例 URL：https://example.com/province/?province_name=aprovince

services.ts

export class DistrictService {
    districtArray: Array<ProvinceData> = [];
    url = "https://example.com/province";
    headers = new HttpHeaders({
        "Content-Type": "application/json",
        Authorization: "Token 5a72afc446dd4c38e5f99"
    });

    constructor(private http: HttpClient) { }

    getInfo(): any {
        return this.http.get(this.url, {headers: this.headers});
    } 

    getProvince(province: string){
        return this.http.get<ProvinceData>(`${this.url}${province}/`, {headers: this.headers});
      }

}

@Component({
  selector: "ns-district",
  templateUrl: "./district.component.html",
  styleUrls: ["./district.component.css"],
  moduleId: module.id
})
export class DistrictComponent implements OnInit {
    districtData: ProvinceData;
   
    // tslint:disable-next-line: max-line-length
    constructor(private districtservices: DistrictService, private route: ActivatedRoute, private router: RouterExtensions) { }

    ngOnInit(): void {
        const province = this.route.snapshot.params.province;
        this.districtservices.getProvince(province).subscribe(
            (data: ProvinceData) => {
            this.districtData = data;
            console.log(province)
            },
            (error) => console.error(error)
            )
        }            
    }

<StackLayout  *ngIf="districtData">         
    <GridLayout android:useDefaultMargins="true" class="test" columns="auto,100" rows="auto,auto" width="2000" height="30" *ngFor="let item of districtData.district">            
        <Label class="list-province" nsRouterLink ="/district" [text]="item" col="0" row="0"></Label>
        <Label class ="arrow-icon" text="&#xf0a9;" class="fas" col="1" row="0" ></Label>
    </GridLayout>
</StackLayout>

Answer 1

您需要使用 angular 中的 HttpParams。并在您的 http get 调用中传递它。您的代码将如下所示。

let httpParams = new HttpParams();
httpParams = httpParams.append(province_name, value);

getProvince(province: string){
        return this.http.get<ProvinceData>(`${this.url}${province}`, {headers: this.headers, httpParams});
}

注意：使用查询参数时，您不需要在 url 末尾传递 /。

带有 Angular 的 NativeScript 将参数传递给 url

NativeScript with Angula pass parameter to url

nativescript

angular