从Angular2的表格输入中读取数据

Question

我想创建一个带有输入的表格并从中读取数据。 目前，我有这样的：

我想单独显示每个字母，但现在如果我在第一排的第一个单元格中键入，它写道：“0”：“V”，第二单元第一行“0”：“我”，...并如我的第一行第五个单元格中所示：“0”：“e”，但我想要的是每个单元格的id，所以它必须是是这样的：

"0": "v", 
"1": "i", 
"2": "e", 
"3": "l", 
"4": "e", 
"5": " ", 
"6": " ", 
"7": " ", 
... 
"29": " ", 

能否请你帮忙，我撞到墙了，我不知道该怎么做...

这里是我的代码：

import { Component, OnInit, ViewChildren, 
    Input, Directive, TemplateRef, ViewContainerRef } from '@angular/core'; 

import { DataService } from '../sample02-simpleService/data.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'part1', 
    template: ` 
    <div> 
    <form #f="ngForm" (ngSubmit)="onSubmit(f)"> 
     <table> 

     <tr *ngFor="let item of itemsSource; let i = index;"> 

      <td *biRepeat="count"> 
     <input name="{{i}}" ngModel #prix="ngModel" [id]="i" /> 
      </td> 
      {{item}} 
     </tr> 
     </table> 
    </form> 
     <pre>{{f.value | json}}</pre> 
    </div> 


    `, 
    // styleUrls: ['app/part1/part1.component.css'], 
    providers: [DataService] 

}) 
export class Part1Component implements OnInit { 
    count: number; 

    @ViewChildren ('prix') inputs; 
    public itemsSource: string[]; 
    constructor(public dataService: DataService) { 
    this.count = 6; 
    } 
    ngOnInit() { 
    this.itemsSource = this.dataService.getData(); 
    } 

@Directive({ selector: '[biRepeat]' }) 
export class RepeatDirective { 

    constructor(private templateRef: TemplateRef<any>, 
       private viewContainer: ViewContainerRef) { } 
    @Input('biRepeat') set count(c: number) { 
    this.viewContainer.clear(); 
    for (let i = 0; i < c; i ++) { 
     this.viewContainer.createEmbeddedView(this.templateRef); 
    } 
    } 
} 

Answer 1

首先你需要创建OBJ键数组。然后访问该数组以获取/设置对象键的值。下面的代码在我的本地环境与静态数据行之有效：

import { Component } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul> 
     <li *ngFor="let o of obj_keys"> 
      <input name="o" id="o" [(ngModel)]="obj[o]" /> 
     </li> 
    </ul> 



    {{obj | json}} 

    `, 
    styles: [` 
    ul,li{margin:0;padding:0;list-style:none;} 
    `] 
}) 

export class AppComponent { 
    obj_keys: any; // declare empty var 

    obj = { 
     "0": "v", 
     "1": "i", 
     "2": "e", 
     "3": "l", 
     "4": "e", 
     "5": "1", 
     "6": "2", 
     "7": "4" 
    } 

    constructor() { 
     this.obj_keys = Object.keys(this.obj); // create object keys array 
    } 
}