javascript – Angular 6：HTML表创建动态列和行

在这里使用Angular 6

我想要一些关于设计我的一个UI组件的输入.所以基本上我们已经在AngularJs中设计了当前功能,但在此
使用Angular 6的新应用程序我想知道是否有更好的方法可以这样做.

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

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

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

ID类型Env添加列
-Delete Row
添加行

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

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

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

<tr ng-repeat="r in targetTable.rows">
 <td class="unique-id">{{r.id}}</td>
 <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
 <td class="blank" colspan="2"></td>
</tr>

在这里看演示：

https://codepen.io/anon/pen/QXwjwM

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

谢谢

有投入的人吗？

解决方法:

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

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

dataSource = this.myformArray.controls;

表格的列变得像

<ng-container matColumnDef="surname">
    <th mat-header-cell *matHeaderCellDef> Surname </th>
        <td mat-cell *matCellDef="let element">
       <input arrow-div [formControl]="element.get('surname')">
       </td>
  </ng-container>

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

有趣的工作是让arrrows键在“单元格”之间移动.
我使用指令.但是,由于我讨厌用@Output()创建一个指令,我使用辅助服务.

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

<input arrow-div [formControl]="element.get('id')" (arrowEvent)="move($event)">
<input arrow-div [formControl]="element.get('name')" (arrowEvent)="move($event)">
<input arrow-div [formControl]="element.get('surname')" (arrowEvent)="move($event)">
  ...

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

<input arrow-div [formControl]="element.get('id')" >
<input arrow-div [formControl]="element.get('name')" >
<input arrow-div [formControl]="element.get('surname')" >
...

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

服务很简单

export class KeyBoardService {
  keyBoard:Subject<any>=new Subject<any>();
  sendMessage(message:any)
  {
    this.keyBoard.next(message)
  }
}

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

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

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

  //@Output() arrowEvent:EventEmitter<any>=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<ArrowDivDirective>

  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<inputToArray.length)
          index+=rows;
        else
        {
          let rowActual=index%rows;
          if (rowActual<rows-1)
            index=(rowActual+1);

        }
        break;
    }
    if (index>=0 && index<this.inputs.length)
    {
      inputToArray[index].element.nativeElement.focus();
    }
  }

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

displayedColumns: string[] = ['name','surname','delete'];
displayedHead:string[]=['Name','Surname']
displayedFields:string[] = ['name','surname'];

我们的桌子就像

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- All columns -->
   <ng-container *ngFor="let col of displayedFields;let i=index" [matColumnDef]="col">
      <th mat-header-cell *matHeaderCellDef> {{displayedHead[i]}} </th>
      <td mat-cell *matCellDef="let element">
        <input arrow-div [formControl]="element.get(col)">
      </td>
    </ng-container>
    <!---column delete-->
  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element;let i=index;">
        <button arrow-div mat-button (click)="delete(i)">delete</button>
    </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

添加列的新函数必须将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 6：HTML表创建动态列和行

相关推荐