Javascript angular 2模板无法识别模板引用变量

我正在用Angular 2构建一个站点，在模板引用变量方面遇到了一些问题。我正在创建一个非常简单的表单，向在线商店添加一个新列表：

<div class="row">
<div class="col-sm-6">
  <div class="form-group">
    <label for="productSKU">Product SKU</label>
    <input #productSKU type="text" class="form-control" id="productSKU" placeholder="Enter Product SKU">
  </div>
  <div class="form-group">
    <label for="productTitle">Product Title</label>
    <input type="text" class="form-control" id="productTitle" placeholder="Enter Product Title" #productTitle>
  </div>
  <div class="form-group">
    <label for="productSubtitle">Product Subtitle</label>
    <input type="text" class="form-control" id="productSubtitle" placeholder="Enter Product Subtitle" #productSubtitle>
  </div>
  <div class="form-group">
    <label for="productPrice">Product Price (USD)</label>
    <input type="text" class="form-control" id="productPrice" placeholder="Enter Product Price" #productPrice>
  </div>
  <div class="form-group">
    <label for="productType">Select Product Type</label>
    <select multiple class="form-control" id="productType" #productType>
      <option *ngFor="let type of listingTypes" [value]="type">{{type}}</option>
    </select>
  </div>
</div>
<div class="col-sm-6">
  <div class="form-group">
    <label for="productDescription">Product Description</label>
    <textarea class="form-control" id="productDescription" rows="8" #productDescription></textarea>
  </div>
  <div class="form-group">
    <label for="productCondition">Product Condition</label>
    <input type="text" class="form-control" id="productCondition" placeholder="Enter Product Condition" #productCondition>
  </div>
  <div class="form-group">
    <label for="storageLocation">Storage Location</label>
    <input class="form-control" id="storageLocation" placeholder="Enter Storage Location" #storageLocation>
  </div>
  <div class="form-group">
    <label for="image1Path">Image 1</label>
    <input type="text" class="form-control" name="image1Path" id="image1Path" placeholder="Enter Image 1 File Name" #image1Path>
  </div>
  <button class="btn" id="newPostSubmitButton" (click)="onNewListingSubmit(productTitle.value,
                                                                            productSubtitle.value,
                                                                            productType.value,
                                                                            productPrice.value,
                                                                            productDescription.value,
                                                                            productCondition.value,
                                                                            productSKU.value,
                                                                            storageLocation.value,
                                                                            image1Path.value)">Submit</button>
</div>

产品SKU
产品名称
产品字幕
产品价格（美元）
选择产品类型
{{type}}
产品说明
产品状况
存储位置
图1
提交

由于某种原因，当我尝试在submit按钮单击的组件中触发onNewListingSubmit方法时，它给出了以下错误：

如您所见，它找不到undefined的属性“value”。它似乎无法识别整个表单中的各种模板引用变量（例如#productSKU、#productPrice等）

---

你知道为什么会这样吗？似乎找不到其他类似问题的例子。谢谢

看起来模板上没有定义

productCondition

。

看起来模板上没有定义

productCondition

。

因为您使用了

textarea

元素。

textarea

中没有直接属性

值。至少为
textarea
中的元素集合定义了它的值，因为您使用了
textarea
元素。
textarea
中没有直接属性
值。至少为
textarea
中的元素集合定义了它的值，用于哪一个？试着一个接一个地删除，看看它抛出了什么错误。如果全部都是，您可以使用
ngModels
为哪一个实现相同的结果？试着一个接一个地删除，看看它抛出了什么错误。如果是这样的话，您可以使用
ngModels
获得相同的结果，这确实非常令人困惑，因为
ViewChild
例如将注入
ElementRef
。我刚刚注意到productCondition问题，但我添加了它，仍然收到相同的错误。我还将每个的ref.value更改为ref.nativeElement.value（如前所述）。linter不再抱怨了，但它仍然在浏览器中抛出相同的错误。呃。它应该可以工作，看看我到底应该在这里看到什么？确实，非常令人困惑，因为
ViewChild
例如将注入
ElementRef
。我刚刚注意到productCondition问题，但我添加了它，并且仍然在接收同样的错误。我还将每个的ref.value更改为ref.nativeElement.value（如前所述）。linter不再抱怨，但它仍然在浏览器中抛出相同的错误。呃。应该可以，看看我到底应该在这里看到什么？