无法选择主要数据表的下拉列表的默认值

Question

我有一个primeng数据表的要求，我已经使用下拉列表呈现了一列primeng数据表，我需要选择下拉列表的默认值。请帮我选择下拉菜单的默认值。如果你看到下面的代码我正在使用数组英雄来获取默认值的索引。在这一行{{i.value}}我分配j ==英雄[0]来获得第二个下拉值默认情况下选择，但我需要将0设置为动态，即我需要动态读取该数组的值，如j == 1，j == 2，j == 3等等，以便每个下拉菜单都有＃＆ 39;自己的默认选择值

Appcomponent.html： -

<div>
    <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10" [responsive]="true">
        <header>CRUD for Cars</header>
        <p-column field="vin" header="Vin" [sortable]="true"></p-column>
        <p-column field="year" header="Year" [sortable]="true"></p-column>
        <p-column field="brand" header="Brand" [sortable]="true"></p-column>
        <p-column field="color" header="Color" [sortable]="true"></p-column>
        <p-column field="brand" header="Brand (Custom)" [filter]="true" [style]="{'overflow':'visible'}" filterMatchMode="equals">
        <template pTemplate="body" let-col>
            <select (ngModelChange)="onChange($event)" name="sel2">
            <option [value]="i" *ngFor="let i of brands;let j=index;" [selected]="j==heroes[0]">{{i.value}}</option>
            </select>
        </template>
       </p-column>
        <footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button></div></footer>
    </p-dataTable>

    <p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
        <div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad" *ngIf="car">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="vin">Vin</label></div>
                <div class="ui-grid-col-8"><input pInputText id="vin" [(ngModel)]="car.vin" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand">Year</label></div>
                <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.year" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand">Brand</label></div>
                <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.brand" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="color">Color</label></div>
                <div class="ui-grid-col-8"><input pInputText id="color" [(ngModel)]="car.color" /></div>
            </div>
        </div>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
                <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
            </div>
        </footer>
    </p-dialog>
</div>

app.component.ts： -

import {Component} from '@angular/core';
import {Car} from './cars/car';
import {CarService} from './cars/carservice';
import {SelectItem} from 'primeng/primeng';
class PrimeCar implements Car {
    constructor(public vin?, public year?, public brand?, public color?) {}
}

@Component({
    templateUrl: 'app/app.component.html',
    selector: 'my-app'
})
export class AppComponent {

    displayDialog: boolean;

    car: Car = new PrimeCar();

    selectedCar: Car;

    newCar: boolean;
    brands: SelectItem[];
    bra:SelectItem[];
    cars: Car[];
    cities: SelectItem[];
    heroes: any[];
    selectedCity: string;

    constructor(private carService: CarService) {
    //this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2]
    //this.num = Array(5).fill().map((x,i)=>i); // [1,2,0]
      this.brands = [];
        this.brands.push({label: '1', value: 'fuck',selectit:2});
        this.brands.push({label: '2', value: 'Audi',selectit:2});
       this.brands.push({label: '0', value: 'BMW',selectit:1});

        this.heroes=[1,2,3,3,2,1,2,2,3,1];


    }

    ngOnInit() {


        this.carService.getCarsMedium().then(cars => this.cars = cars);
    }

    showDialogToAdd() {
        this.newCar = true;
        this.car = new PrimeCar();
        this.displayDialog = true;
    }

    save() {
        if(this.newCar)
            this.cars.push(this.car);
        else
            this.cars[this.findSelectedCarIndex()] = this.car;

        this.car = null;
        this.displayDialog = false;
    }

    delete() {
        this.cars.splice(this.findSelectedCarIndex(), 1);
        this.car = null;
        this.displayDialog = false;
    }

    onRowSelect(event) {
        this.newCar = false;
        this.car = this.cloneCar(event.data);
        this.displayDialog = true;
    }

    cloneCar(c: Car): Car {
        let car = new PrimeCar();
        for(let prop in c) {
            car[prop] = c[prop];
        }
        return car;
    }

    findSelectedCarIndex(): number {
        return this.cars.indexOf(this.selectedCar);
    }
}