angular2：將ngFor與應該表示表格行的模板一起使用時，結果奇怪

Question

我創建了一個股票交易模板，該模板應該代表一張表的一行。 當我出於某種原因將其添加到我的app.component.html中使用的表的表主體中時，所有內容都添加到了一個列中。 知道我在做什么錯嗎？

my product-transaction.html:

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

my stockTransaction.component.ts:

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

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


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

  constructor() { }

  ngOnInit() {
  }

}


my app.component.ts:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RestService } from "./services/rest.service";
import { ProductModel } from './models/product.model';
import { StockTransactionModel } from './models/stock-transaction.model';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('focusInput') focusInput: ElementRef;
barcode: string;
barcodeForm: FormGroup;
product: ProductModel;
stockTransactions: Array<StockTransactionModel>;

    constructor(fb: FormBuilder, private restService: RestService){
        this.barcodeForm = fb.group({
            'barcode':['', Validators.required]
        }); }

submitBarcode(barcode: string) {    
    this.restService.getProduct(barcode)
    .subscribe(
    (res) => {      
        this.product = res;
        this.showStockTransactions(res.ProductCode);
    },
    (res) => {
        console.log("failure" + res);
    }
    );  
    this.barcodeForm.reset();
}

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

 ngAfterViewInit() {
     this.focusInput.nativeElement.focus();
 }


}

my app.component.html:

<div class="row">
<div class="col-md-4 col-md-push-4">
<form [formGroup]="barcodeForm"  role="form" (ngSubmit)="submitBarcode(barcodeForm.value.barcode)" >
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" [formControl]="barcodeForm.controls['barcode']"  name="barcode" #focusInput>         
    <button class="btn btn-submit btn-block" [disabled]="!barcodeForm.controls['barcode'].valid">Submit</button>
</form>

</div>
</div>
<div class="row">
    <div class="col-md-8 col-md-push-2">
    <br /><br /><br /><br />
        <app-product [product]="product"></app-product>
    </div>
</div>
<div class="row">
<br /><br /><br />
    <div class="col-md-12">
        <table class="table table-responsive">
        <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]="stockTransaction"></tr>
        </tbody>
        </table>
    </div>
</div>

Answer 1

您可以為StockTransactionComponent使用屬性選擇器：

@Component({
  selector: '[stock-Transaction]',
  template: `
    <td>{{stockTransaction.Date | date}}</td>
    <td>{{stockTransaction.TransactionType_Name}}</td>
    <td>{{stockTransaction.SupplierMaster_Name}}</td>
    <td>{{stockTransaction.Qty}}</td>
  `
})
export class StockTransactionComponent {
  @Input('stock-Transaction') stockTransaction
}

並在父視圖中

<tr *ngFor="..." [stock-Transaction]="stockTransaction"></tr>

柱塞示例

也可以看看

• Angular2表行作為組件