Question

上面的图片是我目前的显示。当我点击修改按钮时，只应将段落标记转换为所选行的输入字段。

但在我的情况下，它将所有段落更改为输入字段，我找到了一些解决方案，但它们都没有工作。

<div id="lists">
            <table id='mytable' cellspacing='0' cellpadding='0'>
                <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
                    <td class='default-field'>
                        <p class='para' *ngIf="showHideP">{{i+1}}. {{item}}</p>
                    </td>
                    <td class="edit-field" *ngIf="tbox" >
                        <input type="text" class="myCl" [value]="val" >
                        <!-- style='display:inline-block;' -->
                    </td>
                    <td class='btns' >

                    <input type='button' value='edit' class='edit-btn' (click)='hidePara(item,i)' *ngIf="edt">

                    <input type='button' value='save' class='save-btn' *ngIf="sbtn" (click)='hidePara1(item,i)'> 
                    <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
                    </td>
                </tr>
            </table>

        </div>

上面的代码是html代码

  export class AppComponentComponent implements OnInit 
{
  list: string[];
  val: string;
  search:string;
  showHideP: boolean;
  tbox: boolean;
  sbtn: boolean;
  edt: boolean;

 constructor() { 
    this.list=["Purchase a ring for my beautiful wife","get new GALAXY Note 150","Complete kevin's work ASAP","Buy 2 dozen eggs","Get milk on my way to home"];
   this.showHideP = true;
   this.tbox = false;
   this.sbtn = false;
   this.edt = true;

  }
  selectedIndex = 0;
  ngOnInit()  {

  }
  insert=function(temp)
  {
   if(temp!="")
   {
       this.list.unshift(temp);
       this.search="";     
   }
   else
   {
        alert("Enter something");
   }
 }
  deleterow=function(p)
  {    
     if (p > -1) {
     this.list.splice(p, 1);
   }
  }

   hidePara(item,ii){
   this.val=this.list[ii];
   this.showHideP = !this.showHideP;  //for hiding paragraph
   this.tbox = !this.tbox;  //showing text box
   this.edt=!this.edt;  //hide edt button
   this.sbtn = !this.sbtn;  //display save button

 }

  hidePara1(item,ii){

    this.showHideP = !this.showHideP;  //for hiding paragraph
    this.tbox = !this.tbox;  //showing text box
    this.edt=!this.edt;  //hide edt button
    this.sbtn = !this.sbtn;  //display save button 
  }

}

上面的代码是我的组件，当我点击编辑按钮时，它会显示段落位置的文本字段并显示保存按钮，当我点击保存按钮时改变原始状态

添加Alexis_ni代码后，它运行正常，但它显示如下

Answer 1

你可以这样试试：

<div id="lists">
    <table id='mytable' cellspacing='0' cellpadding='0'>
        <tr  class="row" [ngClass]="{'selected': i === selectedIndex}"  *ngFor= 'let item of list let i = index' [attr.data-index]='i'  [ngStyle]="{'background-color': i%2 == '0' ? 'gray' : ''}">
            <td style="width:300px; max-width:300px !important" class='default-field' *ngIf="selectedIndex!=i  ">
                <p class='para' >{{i+1}}. {{item}}</p>
            </td>
            <td style="width:300px; max-width:300px !important" class="edit-field" *ngIf="selectedIndex==i   " >
                <input type="text" class="myCl" [value]="val" >
            </td>
            <td class='btns' >

            <input type='button' value='edit' class='edit-btn'  (click)='hidePara(item,i)' *ngIf="selectedIndex!=i">

            <input type='button' value='save' class='save-btn' *ngIf="selectedIndex==i" (click)='hidePara1(item,i)'> 
            <input type='button' value='DELETE' class='delete-btn' (click)='deleterow(i)'>
            </td>
        </tr>
    </table>

</div>

打字稿：

      selectedIndex = -1;
    hidePara(item,ii){
  this.selectedIndex=ii;
   this.val=this.list[ii];
   this.showHideP = !this.showHideP;  //for hiding paragraph
   this.tbox = !this.tbox;  //showing text box
   this.edt=!this.edt;  //hide edt button
   this.sbtn = !this.sbtn;  //display save button

 }

  hidePara1(item,ii){
    this.selectedIndex=-1;
    this.showHideP = !this.showHideP;  //for hiding paragraph
    this.tbox = !this.tbox;  //showing text box
    this.edt=!this.edt;  //hide edt button
    this.sbtn = !this.sbtn;  //display save button 
  }

Answer 2

不需要额外的变量，如：

this.showHideP = true;
this.tbox = false;
this.sbtn = false;
this.edt = true;

您可以使用单个数组

来维护它

editOn: Array<any>;

hidePara(item,ii){
    this.editOn.indexOf(ii) > -1 ? '' : this.editOn.push(ii);
}

hidePara1(item,ii){
    let index = this.editOn.indexOf(ii);
    this.editOn.splice(index,1);
}

模板方：

*ngIf="editOn.indexOf(i) === -1"
// OR
*ngIf="editOn.indexOf(i) > -1"

以下是工作示例：

https://stackblitz.com/edit/angular-save-issue

按钮单击应该只更改单击的项目，但它正在更改所有项目Angular 4

2 个答案: