angular2 : 매개 변수를 사용하여 라우팅 할 때 다른 구성 요소의 템플리트에 구성 요소 템플릿이 표시되는 문제

Question

ng를 사용하여 app을 빌드 할 때 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 : 당신은 stock-transaction-item에 적합한 선택기를 사용하지 않는

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

. 반면에 camelCase는 속성 선택 자에 대해 권장됩니다. (부품)

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

을하고 StockTransactionItemComponent에 변경 :

주식 transactions.component.html : 당신의 템플릿을 변경 지금 잘 작동하고 @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() {} 

}