如何根据角度7中特定行的列值默认选中复选框和选择框

Question

我有一个表，其值来自 json 包含一些列。当您单击编辑按钮时，将打开一个框，其中复选框值将来自其他 json(statusdata)，直到现在问题都很好被选中将基于点击行的状态列值，关闭框点击关闭链接，这里是下面的代码https://stackblitz.com/edit/angular-zqswrw

app.component.html

<table class="table border">
    <thead>
        <tr>
            <ng-container *ngFor="let column of columns; let i = index">
                <th>{{ column }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of groups;let i = index">
            <td>{{row.name}}</td>
            <td>{{row.items}}</td>
            <td >
                <span class="status" *ngFor="let item of row.Status ;let j = index">
                    {{item.name}}
                   </span> <span  *ngIf = "i == hoverIndex" class="hover-details"></span>
           </td>
            <td style="cursor:pointer;" (click)="edit(row);">Edit</td>
        </tr>
  </tbody>
</table>
<div style="border: 1px solid #000;
    padding: 10px;
    display: flex;
    width: 100%;
    margin-top: 1%;" *ngIf="block">

Status-checkbox:<div style="float:left" *ngFor="let status of statusdata">
 <input type="checkbox" [checked]="" value="status.id" />{{status.name}}
</div>

<div (click)="close();" style="cursor:pointer;float:right;margin-left:10%;">close</div>
</div>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
    statusdata:any;
    block:any;
    closeit:any;
  onHover(i:number){
 this.hoverIndex = i;
}
     columns = ["name", "Items","status","Action"];


  edit(dataItem){
    console.log(dataItem.status);
    this.block = true;  
  }
  ngOnInit() {
      this.closeit = true;
      this.block = false;
      this.test = false;
      this.groups=[{"id":1,"name":"pencils","items":"red pencil","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}],"loc":[{"id":1,"name":"loc 1"},{"id":2,"name":"loc 2"},{"id":3,"name":"loc 3"}]},{"id":2,"name":"rubbers","items":"big rubber","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]},{"id":3,"name":"rubbers1","items":"big rubber1","Status":[{"id":1,"name":"green"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]}];
      this.statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];




} 
close(){
    this.block = false;
}
}

Answer 1

如果要处理复选框的选中状态，请在数组中引入一个变量来保存复选框的状态。以下更改应该对您有所帮助。

app.component.html

Status-checkbox:<div style="float:left" *ngFor="let status of statusdata">
 <input type="checkbox" [checked]="status.checked" value="status.id" />{{status.name}}
</div>

app.component.ts

  edit(dataItem){
      console.log(dataItem.status);
    this.block = true;  

    this.statusdata = this.statusdata.map((item)=>{
      item.checked= false;
        for(var d=0;d<dataItem.Status.length;d++){
          if(item.id==dataItem.Status[d].id){
            item.checked = true;
            break;
          }
        }
      return item;
    });
  }

Answer 2

我想您不仅要显示被选中，否则可以更改。所以使用 [(ngModel)]，而不是 [checked]。 Narayanan 的代码运行良好，但可以简化。

此外，为了考虑这些变化，我们需要一个辅助变量“itemEdit”。功能编辑和关闭可以像

itemEdit:any //<--declare an auxiliar variable where save the "item we are editing"

edit(dataItem) {
    this.itemEdit = dataItem; //<--save a "reference" of the data we are editing 
    this.statusdata.forEach(x => {  //for each element in "statusdata"
      x.checked = dataItem.Status.find(data => data.id == x.id); //give "checked" value
    });
    this.block = true;
  }

  close() {
    //our save "reference", the Status was
    this.itemEdit.Status = this.statusdata
      .filter(x => x.checked)  //get only the values of statusdata.checked
      .map((d: any) => {  //but only want object with id and name properties
        return { id: d.id, name: d.name };
      });
    this.block = false;
  }

.html 使用 [(ngModel)]

Status-checkbox:
 <div style="float:left" *ngFor="let status of statusdata">
    <input type="checkbox" [(ngModel)]="status.checked" 
            value="status.id" />
    {{status.name}}
</div>

你的forked stackblitz

更新如果我们有一个选择，而不是一系列复选框，则技术类似

您有一个变量 statusEdit 并使用 [(ngModel)]

Status-checkbox:<div style="float:left">
        <select [(ngModel)]="statusEdit" >
   <option *ngFor="let status of statusdata"  [value]="status.id">{{status.name}}</option>
 </select>

函数变成：（看到我们正在改变dataItem.Status[0]，因为Status是一个元素的数组）

  edit(dataItem) {
    this.itemEdit = dataItem;
    this.statusEdit = dataItem.Status[0].id;
    this.block = true;
  }
  close() {
    this.itemEdit.Status[0] = {
      ...this.statusdata.find(x => x.id == this.statusEdit)
    };
    this.block = false;
  }

再说一遍，your forked link

Answer 3

当我查看你的 stackblitz 示例和你给我的描述时，我解决了与选中复选框相关的问题。

首先，您必须通过以下代码更新您编辑的函数参数值：

<tr *ngFor="let row of groups;let i = index">
        <td>{{row.name}}</td>
        <td>{{row.items}}</td>
        <td >
            <span class="status" *ngFor="let item of row.Status ;let j = index">
                {{item.name}}
               </span> <span  *ngIf = "i == hoverIndex" class="hover-details"></span>
       </td>
        <td style="cursor:pointer;" (click)="edit(row.Status);">Edit</td>
    </tr>

在页面顶部创建一个变量：

selected_item_id = 0;

然后在您的编辑功能中进行一些更新，例如：

edit(dataItem){
    this.block = true;  
    this.selected_item_id = dataItem[0].id;
  }

在这一切之后，您必须通过以下代码更新选择框的选项：

    <select >
   <option *ngFor="let status of statusdata"  [selected]="status.id == selected_item_id">{{status.name}} </option>
 </select>

希望没有错过任何东西。