Html 如何在angular中禁用和启用按钮

我有一个对象数组，当页面加载时，删除按钮被隐藏。现在我想显示删除按钮，当新对象被推到数组中时，现有对象按钮应该仍然保持隐藏状态。如何隐藏现有按钮并仅显示新对象删除按钮

html

<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array1">
      <td><button type="button" class="btn btn-danger"
          (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>
<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array2">
      <td><button type="button" class="btn btn-secondary"
          (click)=addObj(i)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>

<button type="button" class="btn btn-danger"
    (click)=remove(i) *ngIf="deleteButtonShowIndex.indexOf(i) !== -1">
    <i class="glyphicon glyphicon-remove"></i>
</button>

---

试试这个

//..
disabled = false;

....
addObj(index) {
   // is there a way I can enable the delete button of just the index pushed?
   this.Array1.push(this.List[index]);
   this.List.splice(index, 1)
}

<button type="button" class="btn btn-danger"
    (click)=remove(i) [disabled]="!show">
    <i class="glyphicon glyphicon-remove"></i>button
</button>



//..
show = false;

....
addObj(index) {
   // is there a way I can enable the delete button of just the index pushed?
   this.Array1.push(this.List[index]);
   this.show = true;
   this.List.splice(index, 1)
}

按钮
//..
show=false；
....
addObj（索引）{
//是否有一种方法可以启用仅按下索引的删除按钮？
this.Array1.push（this.List[index]）；
this.show=true；
此.List.splice（索引，1）
}

创建一个

虚拟数组

，其中包含新添加的

对象的
索引
。然后在
*ngIf
中对该
数组
设置条件

Html

<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array1">
      <td><button type="button" class="btn btn-danger"
          (click)=remove(i) [disabled]="disabled">
           <i class="glyphicon glyphicon-remove"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>
<div>
 <table >
   <tr>//.....</tr>
   <tr *ngFor="list of Array2">
      <td><button type="button" class="btn btn-secondary"
          (click)=addObj(i)>
           <i class="glyphicon glyphicon-plus"></i>
          </button></td>
      <td>{{list.type}}</td>
      <td>{{list.year}}</td>
   </tr>
 </table>
</div>

<button type="button" class="btn btn-danger"
    (click)=remove(i) *ngIf="deleteButtonShowIndex.indexOf(i) !== -1">
    <i class="glyphicon glyphicon-remove"></i>
</button>

我建议的更好的方法是在
this.Array1
中维护一个标志，如下所示：

this.Array1 = [{
    show: false,
    data: {}
  },
  {
    show: false,
    data: {}
  },
  {
    show: true,
    data: {}
  }
];

定义一个变量来显示/隐藏按钮
然后更改代码中将新项推送到数组中的变量状态。它可以是任何方法或内部订户等

this.isDisabled = false; // or this.isDisabled = !this.isDisabled;

然后在您的按钮中，使用此
isDisabled
变量绑定禁用的
属性

[disabled]="isDisabled"

完整按钮示例

<button (click)="delete(item.id)" [disabled]="isDisabled">Delete</button>

删除
声明一个属性
showButton
，该属性将用于决定是否显示按钮。当您插入新记录时，请将此
showButton
属性设置为true，这将导致显示演示中所示的按钮。然后，您可以在模板中轻松使用
*ngIf
来决定是否显示按钮

app.component.html

工作演示：
不确定您在问什么！我的意思是将
disabled
变量修改为
true
。你在用forloop里的那个按钮吗？您是否遗漏了问题中的HTML部分？您的问题不清楚。你能详细说明一下吗？我用ngFor显示了一个数组中的对象列表。每卷都有删除按钮，当应用程序加载时，我将所有删除按钮隐藏起来。现在，如果我想将新对象推送到数组（从另一个数组），我希望新对象的按钮可见。@请发布所有相关的HTML代码和TS代码！forLoop和sample DATA如果将disabled设置为false，则
*ngIf=“disabled”
将始终隐藏按钮，而不是禁用按钮。而是在按钮上使用禁用的属性<代码>[disabled]=“disabled”
我做了类似的操作，但它只显示了包括现有按钮在内的所有按钮一次。我只想为新对象显示创建不同的变量，如“显示”以启用和禁用其他按钮。是的，但我有一个问题，即新对象的按钮显示在错误/第一个现有对象上。原因是现有对象的按钮被隐藏。您能否使用相同的解决方案，但使用[disabled]=“disabled”使新的obj按钮保持在同一卷上？将条件设置为disabled但删除！（不是）这是启用的第一个索引按钮！为什么？新的索引按钮已禁用，但第一个现有的索引按钮已启用，为什么？您的解决方案似乎有效，但启用了错误的按钮您是如何创建条件的。请把它贴在这里！这个解决方案不起作用，我以前试过。当我按下新对象时，它将启用所有其他现有按钮。是的，它将启用所有按钮，因为所有按钮都使用相同变量的值。设置更改其值将启用所有按钮或禁用所有按钮。此问题的确切解决方案是为每个对象保留一对新的
key:value
禁用的
false
。然后使用
[disabled]
属性在按钮中绑定
对象.禁用的
。将新项目推送到阵列时，将“禁用”设置为true。这可以通过JavaScript的.filter和.map函数来完成。我现在所做的是使用2个diff数组将新的和旧的obj分开。它似乎很有效。你的演示看起来不错，但它对我没有帮助，因为我无法硬编码按钮。@很高兴你能在stackblitz上分享你的代码，这样我们就有一些工作要做了。有没有办法在不硬编码“showButton”的情况下获得与你的解决方案相同的结果？@很高兴你说
我有一个带有delete的对象数组页面加载时按钮隐藏。
您是如何创建这些按钮以及它们是如何隐藏的？很抱歉，我的json没有包含按钮，我在*ngFor中包含了一个按钮td。请参见问题中更新的html。Array1的按钮被禁用，当从Array2将新索引按到Array1时，我只希望新索引的删除按钮处于活动状态。
<button (click)="addButtonHandler()">
  add record
</button>

<table >
  <tr>
    <th>Name</th>
    <th>Action</th>
  </tr>
  <tr *ngFor = "let val of item">
    <td>{{val.name}}</td>
    <td *ngIf="val.showButton"><button>click me</button></td>
  </tr>
</table>

 name = 'Angular';
 item:Item[]=[]
  constructor(){
    this.item.push({
        'name':'Monica',
        'showButton':false
    })

    this.item.push({
        'name':'Rachel',
        'showButton':false
    })
  }

  addButtonHandler(){
    this.item.push({
      'name':'phoebe',
      'showButton':true
    })
  }