typescript 如何使用id作为查询字符串路由参数将get请求从angular发送到ASP.NET Rest API

iq3niunx  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(238)

我尝试使用id作为查询字符串路由参数从angular向rest API发送get请求。在控制器类中,我有一个action方法,我想在其中接收id作为查询字符串路由参数,但我不知道如何从angular向rest api发送请求。

Angular服务类get方法

getAdvertisement(id: number): Observable<Advertisement> {
    return this.http.get<Advertisement>(`${this.baseApiUrl}/api/advertisements?id=${id}`);
  }

组件类
在这一行“this.advertisementService.getAdvertisement(id)”中,我收到错误“Argumentoftype 'string| null'不能分配给类型为' number '的参数。”

export class DetailsComponent implements OnInit {
  
  advDetails: Advertisement={
    id: 0,
    name: '',
    price: '',
    description: ''
  };
  constructor(private route: ActivatedRoute, private advertisementService: AdvertisementsService) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      this.advertisementService.getAdvertisement(id).subscribe(response =>{
        // here in id i'm receiving that error
        this.advDetails = response;
      });
      
      // if(id != null){
      // }
    });
  }

}

Controller类操作方法

[HttpGet]
        public IActionResult GetAdvertisements()
        {
            try
            {
                string temp = Request.Query["id"];
                if (!string.IsNullOrWhiteSpace(temp))
                {
                    int id = Convert.ToInt32(temp);
                    if (id > 0)
                    {
                        AdvertisementModel adv = new AdvertisementsHandler().GetAdv(id).ToModel();
                        return Ok(adv);
                    }
                }
            }
            catch (Exception ex)
            {
                return StatusCode(500, ex); //Internal server error;
            }
        }
whlutmcx

whlutmcx1#

您的错误“Argument of type 'string| null'不能分配给类型为' number '的参数。”**
是由将字符串传递给需要数字的方法引起的。
你可以通过修改这个方法接受字符串而不是数字来很容易地修复它。

getAdvertisement(id: string): Observable<Advertisement> {
    return this.http.get<Advertisement>(`${this.baseApiUrl}/api/advertisements?id=${id}`);
  }

问题是,如果由于某种原因,这个字符串将不是一个数字,你将从后端得到异常。
你可以做的另一件事是将它转换为angular中的number:

ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const id = parseInt(params.get('id'));
      if (!id) {
        //handle case when id is not an integer number
        return;
      }

      this.advertisementService.getAdvertisement(id).subscribe(response =>{
        // here in id i'm receiving that error
        this.advDetails = response;
      });
      
      // if(id != null){
      // }
    });
  }

相关问题