angular2：パラメータを使用してルーティングするときに別のコンポーネントのテンプレートにコンポーネントテンプレートを表示する問題

Question

ngを使用してアプリケーションをビルドするとき、productCodeパラメータを取得してstockTransactionItemsのテーブルを表示するstockTransactionsビューにルーティングしようとしています。 -cliエラーは発生しませんが、Chromeでアプリにナビゲートすると、デベロッパーコンソールで以下のエラーメッセージが表示されるだけです...在庫取引アイテムを使用できないか、見つけられないようですセレクタ/コンポーネント...私はapp.moduleにStockTransactionItemComponentをインポートしましたが、過去には何の問題もなく同様のことをしました...何が間違っているのでしょうか？

私のエラー（コードがエラーを下回っている）：

zone.js:388Unhandled Promise rejection: Template parse errors: Can't bind to 'stock-transaction-item' since it isn't a known property of 'tr'. (" ][stock-transaction-item]="stockTransactionItem"> "): StockTransactionsComponent@14:63 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: Can't bind to 'stock-transaction-item' since it isn't a known property of 'tr'. (" ][stock-transaction-item]="stockTransactionItem"> "): StockTransactionsComponent@14:63

株式transactions.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> 

株式transactions.component.ts：

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); 
    } 

} 

株式取引item.component.html：

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

株式取引item.ts：

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() { 
    } 

} 

Answer 1

あなたはstock-transaction-itemのために右のセレクターを使用していません。一方、camelCaseは属性セレクタの使用を推奨しています。

株式transactions.component.html：（一部）

<tbody> 
    <tr *ngFor="let transItem of stockTransactions" [stockTransactionItem]="transItem"></tr> 
</tbody> 

とあなたのStockTransactionItemComponentに変更します。それは今も元気働いて@PierreDuc

@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() {} 

}