Angular 8 У меня проблема с отправкой идентификатора в угловых

Я использую угловой 8 в качестве передней части и колбу в качестве бэкэнда. На этой странице отображаются все продукты при нажатии кнопки. Перейдите на страницу конкретного продукта, и идентификатор должен быть пропущен через URL, но он не работает должным образом. Мой код приведен ниже.

HTML

          <div class="grid-offer">
            <div class="row" >
              <div class="col-md-2 col-6 col-sm-4" style=" margin-bottom: 1em;" *ngFor="let item of product| slice:0:24;"> <br>
                <div class="box" routerLink="item">
                  <img [src]="item.photo" alt="image slide" style="display: block; width: 100%;">
                  <div class="text-center">
                    <h6>{{item.name}}</h6>           
                    <h6>MRP : ₹ {{item.price}}</h6>
                    <div class="row" style="margin-left: .1em; margin-right: .1em;">
                      <div class="col">
                        <button type="submit" class="btn btn-outline-success btnborder" id="{{item.pId}}" (click)=buy($event)><i class="fa fa-money fa-lg" aria-hidden="true" ></i></button>
                      </div>
                      <div class="col">
                        <button type="submit" class="btn btn-outline-orange btnborder" id="{{item.pId}}" (click)=addToCart($event)><i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i></button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

        </div>

Т.С.

  buy(event){
    console.log("item",event.target.id);
    this.commonService.instantBuy(event.target.id).subscribe((data:any)=>{
      console.log(data);
      this.route.navigate(['productdetails'])
    })    
  }

служба

  public instantBuy(data:any){
    return this.http.post("http://127.0.0.1:5000/getproductbyid",data);
  }

при нажатии кнопки идентификатор проходит, но эта ошибка приходит ..

item 1

Uncaught (в обещании): Ошибка: невозможно сопоставить ни один маршрут. Сегмент URL: ошибка 'item': невозможно сопоставить ни один маршрут. Сегмент URL: «элемент»

Всего 1 ответ


Вместо передачи $event при клике (click)="buy($event)" , передайте весь item (click)="buy(item)"

app.component.html

...
<div class="col">
  <button type="submit" class="btn btn-outline-success btnborder" id="{{item.pId}}" (click)="buy(item)"><i class="fa fa-money fa-lg" aria-hidden="true" ></i></button>
</div>
<div class="col">
  <button type="submit" class="btn btn-outline-orange btnborder" id="{{item.pId}}" (click)="addToCart(item)"><i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i></button>
</div>
...

app.component.ts

buy(item){
  console.log(item.pId);       
}

Есть идеи?

10000