html如何创建6行4列表格,javascript – Angular 6：HTML表创建动态列和行

在这里使用Angular 6

我想要一些关于设计我的一个UI组件的输入.所以基本上我们已经在AngularJs中设计了当前功能,但在此

使用Angular 6的新应用程序我想知道是否有更好的方法可以这样做.

以下是我想要设计的UI流程.

用户在顶部填写一个表单,基本上是一些文本框和下拉列表.

在上面的选择之后,我显示了一个HTML表,其中包含3个静态列和几个按钮,如下所示：

ID类型Env添加列

-Delete Row

添加行

在Id,Type和Env之上是3个静态列,它们总是在那里.现在,如果用户想要添加更多列(动态),则可以单击“添加列”按钮,用户可以在该列中输入自己的特定名称.还应该在功能上删除动态列.

用户完成添加列后,可以单击“添加行”,这将创建动态行,然后用户可以向表中输入数据.

用户添加行后,用户可以单击“删除行”按钮删除该行.

用户完成向表中添加列和行后,最后会有一个提交按钮,它会将上面以Json格式发送到我的API,

然后保存整个表格.

仅供参考我在angularjs中已经有了这个版本的工作版本,我对每一行都使用了满足的内容,如下所示：

{{r.id}}

在这里看演示：

我需要输入的是如何设计这个html表,其中包括在Angular 6中添加/删除动态行和列的所有功能.是否有一些开源可用或者是否有人可以帮我一些例子.或者如果我需要手动创建所有这些.就像我在AngularJs中做的那样.

谢谢

有投入的人吗？

解决方法:

加入我的两条评论,我创建了这个stackblitz

我使用材料表因为我懒得形成一张桌子.如评论所述,我们需要使用mat-table的唯一方法是将dataSource作为Form Array的控件

dataSource = this.myformArray.controls;

表格的列变得像

Surname

是的,使用[formControl] = element.get(‘nameOfField’)很简单

有趣的工作是让arrrows键在“单元格”之间移动.

我使用指令.但是,由于我讨厌用@Output()创建一个指令,我使用辅助服务.

如果我们不使用服务,我们的.html看起来像

...

如果我们使用服务,我们的HTML变得更加透明

...

在应用程序中,我们订阅了该服务.

服务很简单

export class KeyBoardService {

keyBoard:Subject=new Subject();

sendMessage(message:any)

{

this.keyBoard.next(message)

}

}

只是一个主题和一个将值发送给主题的方法.

该指令仅在箭头键关闭时监听并发送密钥发送方.好吧,我发送一个{element：…,acction：..}类型的对象来发送更多信息.

export class ArrowDivDirective {

constructor( private keyboardService:KeyBoardService,public element:ElementRef){}

//@Output() arrowEvent:EventEmitter=new EventEmitter();

@HostListener('keydown', ['$event']) onKeyUp(e) {

switch (e.keyCode)

{

case 38:

this.keyboardService.sendMessage({element:this.element,action:'UP'})

break;

case 37:

if (this.element.nativeElement.selectionStart<=0)

{

this.keyboardService.sendMessage({element:this.element,action:'LEFT'})

e.preventDefault();

}

break;

case 40:

this.keyboardService.sendMessage({element:this.element,action:'DOWN'})

break;

case 39:

if (this.element.nativeElement.selectionStart>=this.element.nativeElement.value.length)

{

this.keyboardService.sendMessage({element:this.element,action:'RIGTH'})

e.preventDefault();

}

break;

}

}

}

好吧,当我们点击lfet和右箭头时,我会在你最初或初始输入时考虑发送或不发送密钥.

app.component只需订阅服务并使用ViewChildren存储所有输入.小心点！ mat-table中viewchildren的顺序从上到下,从左到右

@ViewChildren(ArrowDivDirective) inputs:QueryList

constructor(private keyboardService:KeyBoardService){}

ngOnInit()

{

this.keyboardService.keyBoard.subscribe(res=>{

this.move(res)

})

}

move(object)

{

const inputToArray=this.inputs.toArray()

const rows=this.dataSource.length

const cols=this.displayedColumns.length

let index=inputToArray.findIndex(x=>x.element===object.element)

switch (object.action)

{

case "UP":

index--;

break;

case "DOWN":

index++;

break;

case "LEFT":

if (index-rows>=0)

index-=rows;

else

{

let rowActual=index%rows;

if (rowActual>0)

index=(rowActual-1)+(cols-1)*rows;

}

break;

case "RIGTH":

console.log(index+rows,inputToArray.length)

if (index+rows

index+=rows;

else

{

let rowActual=index%rows;

if (rowActual

index=(rowActual+1);

}

break;

}

if (index>=0 && index

{

inputToArray[index].element.nativeElement.focus();

}

}

*更新如果我们想添加dinamically列添加新的两个变量(加上“displayedColumns”

displayedColumns: string[] = ['name','surname','delete'];

displayedHead:string[]=['Name','Surname']

displayedFields:string[] = ['name','surname'];

我们的桌子就像

delete

添加列的新函数必须将FormControl添加到数组的每个FormGroup,实现变量displayedColumns,displayedHead和displayedFields

addColumn()

{

let newField="Column"+(this.displayedFields.length+1)

this.myformArray.controls.forEach((group:FormGroup)=>{

group.addControl(newField,new FormControl())

})

this.displayedHead.push(newField)

this.dataSource = [...this.myformArray.controls];

this.displayedFields.push(newField);

this.displayedColumns=[...this.displayedFields,"delete"];

}

在这个another stackblitz中我添加了这个功能(也是如何删除行以及如何创建新行)

标签：javascript,angular

来源： https://codeday.me/bug/20190928/1825549.html