Question

我已使用angular 7设置了项目。ngFor中有数据列表。我有所有状态文本为待定的产品列表。如果单击批准或拒绝按钮，它将更改列表中的所有文本。对于我点击过的一切。我想做的是，如果我单击列表按钮之一，我想将状态文本从待定更改为批准或拒绝

我尝试获取索引值并使用它，但是只有在将其从待处理设置为批准时，它才有效。也许我的想法是错误的！

setStatus(product: any, index, status){
  if (product) {
      if(this.indexToAppendClassTo.indexOf(index) === -1)
        this.indexToAppendClassTo.push(index);
    } 
  if(status === 'approved'){
    this.approved.push(product)
  }else {
    this.declined.push(product)
  }
}

indexToAppendClassTo.includes(i)将为您提供布尔值。

这是一些代码https://stackblitz.com/edit/angular-y1hsbn?file=src%2Fapp%2Fapp.component.ts

我希望能够使产品处于待处理状态，当我单击“批准”或“拒绝”时，它会根据单击将“待批准”的值更改为“批准”或“已拒绝”。这样做有更好的方法吗？

Answer 1

所以我从您的代码中知道的是，您总共有三个列表。

您用于迭代（ngFor）的一个，其他两个被批准，如果我错了，请拒绝纠正我。

一种方法是将一个对象与您的产品以及另一个键作为状态，并根据按钮的单击更改值。

或

将这些行添加到您的代码中：

  if(status === 'approved'){
    //this line will remove the product from declined list
    this.declined = this.declined.filter(function(value, index, arr){

    return value!== product;

});
    this.approved.push(product)
  }else {
  //this line will remove the product from approved list
  this.approved= this.approved.filter(function(value, index, arr){

    return value!== product;

});
    this.declined.push(product)
  }
}

注意：请确保您从正确的列表中显示结果。

Answer 2

因为我们正在处理对象数组，所以您可以轻松地通过click事件切换属性值，例如<p (click) ="product.status ='approved'">approve</p>

模板

<div>
    <ul>
        <li *ngFor="let product of products; let i = index" 
      [ngClass]="{'approved':product.status =='approved' ,'declined':product.status =='declined'}">
        <p>{{product.name}} <i>{{product.status}}</i></p> 
       <div>
          <p (click) ="product.status ='approved'">approve</p>
          <p (click) ="product.status = 'declined'">decline</p>
      </div>
    </li>
  </ul>
</div>

，通过这种方式，我们将切换功能移至模板，并且现在非常容易使用 [ngClass] 指令

设置元素的样式

stackblitz demo

根据ngfor动态列表中的点击更改文本状态

2 个答案: