Question

我有一个选择并选中所有复选框的表格，我想在选择并单击编辑按钮时使所选行可编辑。

<tbody>
  <tr *ngFor='let row of rowData'>
    <td class="text-center">
      <input type="checkbox" />
    </td>
    <td>{{row.name}}</td>
    <td>{{row.email}}</td>
    <td>{{row.remark}}</td>
    <td>{{row.test1}}</td>
    <td>{{row.Test2}}</td>
    <td>{{row.Test3}}</td>
    <td>{{row.Test4}}</td>
    <td>{{row.Test5 }}</td>
    <td>{{row.Test6 }}</td>
  </tr>
</tbody>

Answer 1

<tbody>
  <ng-container *ngFor='let row of rowData; let i = index'> 
    <tr *ngIf="selected === i">
      <td class="text-center">
        <input type="checkbox" />
      </td>
      <td><input [(ngModel)]="row.name"></td>
      <td><input [(ngModel)]="row.email"></td>
      <td><input [(ngModel)]="row.remark"></td>

      <td><input [(ngModel)]="row.test1"></td>
      <td><input [(ngModel)]="row.test2"></td>
      <td><input [(ngModel)]="row.test3"></td>
      <td><input [(ngModel)]="row.test4"></td>
      <td><input [(ngModel)]="row.test5"></td>
      <td><input [(ngModel)]="row.test6"></td>
    </tr>

    <tr *ngIf="selected !== i" (click)="selected = i">
      <td class="text-center">
        <input type="checkbox" />
      </td>
      <td>{{row.name}}</td>
      <td>{{row.email}}</td>
      <td>{{row.remark}}</td>

      <td>{{row.test1}}</td>
      <td>{{row.Test2}}</td>
      <td>{{row.Test3}}</td>
      <td>{{row.Test4}}</td>
      <td>{{row.Test5 }}</td>
      <td>{{row.Test6 }}</td>
    </tr>
  </ng-container>
</tbody>

Answer 2

我认为你需要一个像这样的新组件，并在那里编写所有逻辑，例如（非常快速的代码编写）：

    <span [hidden]="!isDisplay" (click)="beginEdit(editText)">
        {{ text }}
    </span>
    <span [hidden]="isDisplay">
        <input #editText type="text" [value]="text">
    </span>


export class InlineEditComponent {
    @Input() public text: any;
    @Output() public edit = new EventEmitter<string>();

    public isDisplay = true;

    constructor(private _eref: ElementRef) {
    }

    @HostListener('document:click', [ '$event.target' ])
    public onClick(targetElement) {
        if (!this._eref.nativeElement.contains(targetElement)) {
            this.isDisplay = true;
        }
    }

    public beginEdit(el: HTMLElement): void {
        this.isDisplay = false;
        setTimeout(() => {
            el.focus();
        }, 100);
    }

    public editDone(newText: any): void {
        this.isDisplay = true;
        this.edit.emit(newText);
    }
}

然后在你的表中使用它

Answer 3

您应该向rowData添加属性，例如editable。然后像这样布局你的代码：

<tbody>
        <tr *ngFor='let row of rowData' [ngClass]="{ 'selected': row.selected }">
          <td class="text-center>
              <input type="checkbox" [(ngModel)]="row.selected" />
          </td>
          <td>
             <input type="text" *ngIf="row.editable" [(ngModel)]="row.name" />
             <ng-container *ngIf="!row.editable">{{row.name}}</ng-container>
             <!-- You can use span or whatever instead of ng-container-->
          </td>
          <!-- Repeat for other cells -->      
        </tr>
      </tbody>

对于全部选择部分，我假设你在thead中有复选框。它需要有这个代码：

<td><input type="checkbox" (change)="selectAll($event)" /></td>

然后在你的组件中：

    selectAll(event) {
        if (event.target.checked) {
            this.rowData = this.rowData.map((row) => {
               row.selected = true;
               return row;
            });
        } else {
            this.rowData = this.rowData.map((row) => {
               row.selected = false;
               return row;
            });
        }
    }

然后，您必须在表格上方有一个编辑按钮，该按钮将获取所有选定的行并使其可编辑。

makeEditable() {
  this.rowData = this.rowData.map((row) => {
     if (row.selected) { row.editable = true; }
     else { row.editable = false; }
     return row;
  });
}

点击编辑按钮调用此方法。

如何在单击编辑按钮时使所选行可编辑在角度4中

3 个答案: