Question

我正在Angular 4项目中工作，在此我需要获取图像的Onclick上的Span标记中的值。我提到了一些Stackoverflow的问题，但没有任何对我有用......

这是我的HTML。

 <div class="col-sm-4">
     <div class="card">
         <div class="card-img-top card-img-top-250 one">
             <img  class="img-fluid" "src="assets/Images/Popular_Products/3.jpg" alt="img1">
             <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" onclick="getProductName()" >
          </div>
          <div class="card-block pt-2">
              <div class="col-sm-12 text-center card-text">
                  <span #Pname> iPhone</span>
                  <br>
                  <br>
                  1500 $
              </div>
          </div>
      </div>
  </div>

这是我的.ts文件

getProductName(Pname: string) {
      this.http.get(`http://localhost:57036/api/data/CartCount/?ProductName=${Pname}`)
               .subscribe(data => this.res = (data['ITEM_QTY']),
                         error => console.error(error));       
}

当我点击图片时，我想获取span标记中的值并将其传递给API，但在我的情况下，我无法获得span值。我是Angular4的新手，请指导我解决这个问题。

Answer 1

您可以这样做：

在MarkUp中：

<div class="col-sm-4">
    <div class="card">
        <div class="card-img-top card-img-top-250 one">
            <img  class="img-fluid" src="assets/Images/Popular_Products/3.jpg" alt="img1">
            <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >
        </div>
        <div class="card-block pt-2">
            <div class="col-sm-12 text-center card-text">
                <span #Pname> iPhone</span>
                <br>
                <br>
                1500 $
            </div>
        </div>
    </div>
</div>

在组件中

getProductName(Pname: any) {
    console.log(Pname.textContent)
}

Answer 2

<img routerLink="/my-cart" class="..." src="..." onclick="getProductName()" >

首先，在图片代码中添加一个结束斜杠。每个标签都应该关闭其次，您正在使用Angular。如果需要Angular上下文，请使用Angular语法第三，您不能在图像上使用routeLink和点击处理程序。嗯，你可以，但你会遇到奇怪的行为。

这是您的更新图片。

<img class="..." src="..." (click)="getProductName()" />

现在，您可以获取范围值，并路由到您的路线。

getProductName() {
  const productName = this.Pname.nativelement.innerText;
  // Do what you want here, then route :
  this.router.navigate(['/my-cart']);
}

请记住导入所需的依赖项，在构造函数中声明它们，以及作为类成员。

import { Router } from '@angular/router';
import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('Pname') Pname: ElementRef;

constructor(private router: Router) {}

Answer 3

你需要在这里修改一些事情：

点击角度事件为：

<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >

功能为：

getProductName(Pname: string) {
      let spanContent = <HTMLSpanElement>Pname.innerHTML;      
}

如何使用Angular 4中的onClick事件获取Angular 4中的span值

3 个答案: