Question

我正在尝试路由到一个stockTransactions视图，该视图接受一个productCode参数，然后显示一个stockTransactionItems表...当我使用ng-cli构建应用程序时我没有收到任何错误但是当我导航到app时在chrome中它只是说在开发人员控制台中加载以下错误消息...似乎它无法使用或找到stock-transaction-item选择器/组件...我在app.module中导入了StockTransactionItemComponent过去我做过类似的事情而没有任何问题......知道这里可能出现什么问题吗？

我的错误（代码低于错误）：

zone.js：388Unhandled Promise rejection：模板解析错误：无法绑定到'stock-transaction-item'，因为它不是'tr'的已知属性。（” ] [股票的交易项目] = “stockTransactionItem” ＆GT; “）：StockTransactionsComponent @ 14:63;区域：;任务：Promise.then;值：错误：模板解析错误：无法绑定到'stock-transaction-item'，因为它不是'tr'的已知属性。（” ] [股票的交易项目] = “stockTransactionItem” ＆GT; “）：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作为属性选择器。将模板更改为：

stock-transactions.component.html：（部分）

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

并将您的StockTransactionItemComponent更改为：

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

}

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

1 个答案: