0
我想创建一个带有输入的表格并从中读取数据。 目前,我有这样的:从Angular2的表格输入中读取数据
我想单独显示每个字母,但现在如果我在第一排的第一个单元格中键入,它写道:“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);
}
}
}
谢谢你,但我需要显示类似的obj =数据{”‘0’:‘V’,‘1’:‘我’},我从数组中获取数据并在Dataservice中定义(在提供者中),有5个单词,我希望能够使每个输入具有唯一性并从每个输入数据中读取,此刻我可以从每行读取数据,不是细胞... – Natali