angular2：在另一个组件中显示组件模板的问题'；在使用参数进行路由时使用模板

我正在尝试路由到stockTransactions视图，该视图采用productCode参数，然后显示stockTransactionItems表。。。当我使用ng cli构建应用程序时，我没有收到任何错误，但当我在chrome中导航到该应用程序时，它只会在开发者控制台中显示加载时出现以下错误消息。。。似乎无法使用或找到股票交易项目选择器/组件。。。我在app.module中导入了StockTransactionItemComponent，在过去我做过类似的事情，没有任何问题。。。你知道这里出了什么问题吗

我的错误（代码如下错误）：

zone.js:388未处理的承诺拒绝：模板分析错误： 无法绑定到“股票交易项目”，因为它不是“tr”的已知属性。(" ][股票交易项目]=“股票交易项目”> "): StockTransactionsComponent@14:63 ; 区域：；任务：承诺；值：错误：模板分析错误： 无法绑定到“股票交易项目”，因为它不是“tr”的已知属性。(" ][股票交易项目]=“股票交易项目”> "): StockTransactionsComponent@14：63

股票交易.component.html:

<div class="row">
    <div class="col-md-6 col-md-push-3">
        <div class="col-md-8" *ngIf="stockTransactions">
        <h1>Stock Transactions</h1>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Supplier</th>
                    <th>Qty</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let stockTransaction of stockTransactions" [stock-transaction-item]="stockTransaction"></tr>
            </tbody>
        </table>
    </div>
</div>

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { StockTransactionModel } from '../../models/stock-transaction.model';
import { RestService } from '../../services/rest.service';
@Component({
  selector: '[stock-transaction]',
  templateUrl: './stock-transactions.component.html',
  styleUrls: ['./stock-transactions.component.css']
})
export class StockTransactionsComponent implements OnInit {
    stockTransactions: Array<StockTransactionModel>;
    productCode: string;


  constructor(private restService: RestService, private route: ActivatedRoute) { 

  }


  showStockTransactions(productCode: string) {
        this.restService.getStockTransactions(productCode)
            .subscribe(
            (res) => {
                this.stockTransactions = res;
                console.log(this.stockTransactions);
            },
            (res) => {
                console.log("failure " + res);
            }
            );
    }

  ngOnInit() {
      this.productCode = this.route.snapshot.params['productCode']          
    this.showStockTransactions(this.productCode);
  }

}

    <td>{{stockTransactionItem?.Date | date}}</td>
    <td>{{stockTransactionItem?.TransactionType_Name}}</td>
    <td>{{stockTransactionItem?.SupplierMaster_Name}}</td>
    <td>{{stockTransactionItem?.Qty}}</td>

    import { Component, OnInit, Input } from '@angular/core';

import { StockTransactionModel } from '../../models/stock-transaction.model';


@Component({
  selector: 'stock-transaction-item',
  templateUrl: './stock-transaction-item.component.html',
  styleUrls: ['./stock-transaction-item.component.css']
})
export class StockTransactionItemComponent implements OnInit {
@Input("stock-transaction-item") stockTransactionItem: StockTransactionModel;

  constructor() { }

  ngOnInit() {
  }

}

---

您没有为

股票交易项目使用正确的选择器。另一方面，建议属性选择器使用camelCase。将模板更改为：

股票交易.component.html:（部分）

您没有为
股票交易项目使用正确的选择器。另一方面，建议属性选择器使用camelCase。将模板更改为：

股票交易.component.html:（部分）

谢谢@PierreDuc现在一切正常！你能向我解释一下为什么选择器需要在[]内吗？这是一个。因此，一个html元素的属性。如果不使用括号，则只有将其设置为html元素时，它才会起作用：
。您也可以参考默认选择器，谢谢@PierreDuc现在一切正常！你能向我解释一下为什么选择器需要在[]内吗？这是一个。因此，一个html元素的属性。如果不使用括号，则只有将其设置为html元素时，它才会起作用：
。您还可以参考默认选择器
<tbody>
   <tr *ngFor="let transItem of stockTransactions" [stockTransactionItem]="transItem"></tr>
</tbody>

@Component({
  selector: '[stockTransactionItem]', //attribute selector
  templateUrl: './stock-transaction-item.component.html',
  styleUrls: ['./stock-transaction-item.component.css']
})
export class StockTransactionItemComponent implements OnInit {

  @Input() //no need to specify this anymore
  stockTransactionItem: StockTransactionModel;

  constructor() {}

  ngOnInit() {}

}