angular2: strange result when using ngFor with a template that's supposed to represent a table row

Question

I created a stock-transaction template which is supposed to represent one row of a table. When I add this to the table body of a table used in my app.component.html for some reason everything gets added to one column. Any idea what i'm doing wrong?

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>

score 2 · Accepted Answer · edited May 23 '17 at 12:02

2

You can use attribute selector for your 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
}

And in parent view

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

Plunker Example

See also

Angular2 table rows as component

edited May 23 '17 at 12:02

Community

1
1

answered Dec 13 '16 at 10:20

yurzui

205,937
32
433
399

I now get the following error: zone.js:388Unhandled Promise rejection: Template parse errors: Can't bind to 'stock-Transaction' since it isn't a known property of 'tr'. (" ][stock-Transaction]="stockTransaction"> "): AppComponent@28:57 ; Zone: ; Task: Promise.then ; Value: Error: – user2094257 Dec 13 '16 at 11:47
I've updated answer. You have to use correct attribute name – yurzui Dec 13 '16 at 11:54
now all errors are gone but no rows are displayed in the table... I can see the array of stockTransactions that come through from the server in chrome console but nothing gets displayed... Any idea what else I can check? – user2094257 Dec 13 '16 at 12:35
Please provide plunker or github project. As you can see my plunker works well. I think you went wrong somewhere – yurzui Dec 13 '16 at 12:37
Thanks for your effort... I added all relevant code in my question – user2094257 Dec 13 '16 at 12:48
In StockTransactionComponent change `@Input('stock-transaction') StockTransactionModel;` to `@Input('stock-transaction') stockTransaction;` There is no `StockTransactionModel` variable in your template – yurzui Dec 13 '16 at 12:51
that didn't make a difference... shouldn't the @Input() be the type that's being input? I know it's a stockTransaction but stockTransaction is a stockTransactiomModel – user2094257 Dec 13 '16 at 13:05
Then change your `product-transaction.html` `stockTransaction?.Date` to `stockTransactiomModel ?.Date` – yurzui Dec 13 '16 at 13:10
this worked: @Input("stock-transaction") stockTransaction: StockTransactionModel; Thanks again – user2094257 Dec 13 '16 at 13:36

angular2: strange result when using ngFor with a template that's supposed to represent a table row

1 Answers1