Question

更新

ElementRef和修复我的语法解决了标题中的问题。我现在遇到的主要问题是我仍然无法使用此代码更改textContent

ngAfterViewInit() { this.product1.nativeElement.textContent = this.productList[0].productName; }

Chrome的inpect工具给我一个错误，说它无法获得productName of undefined，即使productName of undefined的预期值可以在应用中使用插值显示在同一个数组中拒绝上述代码的文件非常相同。我会这样做，但我需要数组索引依赖于用户点击的元素，我知道的唯一方法是JavaScript函数。我想在开始之前让上面的代码行工作。

我不明白它是如何被定义的，仍然“有选择地”做它所说的。好吧，我可以理解。这可能是因为我搞砸了。

原始问题：

我正在研究一个角度项目的最后一步，我正在做的是学习MEAN堆栈。该项目基本上是一个产品列表，其中每个产品的产品名称和详细信息都来自noSQL数据库。产品名称放在ProductComponent上的元素中以生成可点击列表，并根据用户点击的产品名称/ html元素，ProductdetailComponent将显示该产品独有的详细信息。< / p>

在我的学习中，我发现ViewChild是这样做的方法。但是，正如标题所说，我似乎无法引用nativeElement属性。

我想更改#product1上productdetail.component.html的div的textcontent，但在此之前，我必须设法访问该元素。我很感激任何帮助。以下是我认为的相关代码，错误是：

ERROR in src/app/productdetail/productdetail.component.ts(42,27): error TS2339: Property 'nativeElement' does not exist on type 'ProductdetailComponent'.

productdetail.component.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from '../data.service';
import { Product } from '../product';

@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css'],
  providers: [ DataService ]
})

export class ProductdetailComponent implements OnInit, AfterViewInit {
  @ViewChild(ProductdetailComponent) product1: ProductdetailComponent;
  productList: Product[]=[];
  constructor(private dataService: DataService) { }

  getProduct(){
    this.dataService.getproductList()
    .subscribe(
      products => {
        this.productList = products;
      }
    )
  };

  ngOnInit() {
    this.getProduct();
  }

  ngAfterViewInit() {
    console.log(this.product1.nativeElement);
  }
}

productdetail.component.html

<div class="topnav" id="myTopnav">
    <a href="home">Home</a>
    <a href="products">Products</a>
    <a class="active" href="#">Product Detail</a>
</div>   

<p>
  productdetail works!
</p>

<div id="product" #product1 > No </div>

我的目标是将“否”显示为其他内容。

角度问题：'ProductdetailComponent'类型中不存在属性'nativeElement'

0 个答案: