从html到组件的角度条件？

Posted 2023-02-23

【中文标题】从html到组件的角度条件？

【英文标题】：Angular if condition from html to component?

【发布时间】：2019-04-02 11:50:01

【问题描述】：

我在 Angular 中遇到了一个非常新的问题：我想在一个表中创建多个过滤器。所以为了实现这一点，我想在输入上创建一个“if”条件，例如，如果我有一个名为“Entity”的表头，那么它将告诉我的组件类它是输入实体。

我如何做到这一点？

  public performFilter(filterBy: string): IDonnee[] 
      filterBy = filterBy.toLocaleLowerCase();
      // I'd want to put the condition here like (if input.class == "entity then.."
      if (this.isFiltered) 
        return this.filteredDonnees.filter((donnee: IDonnee) =>
          donnee.entity.toLocaleLowerCase().indexOf(filterBy) !== -1);
       else 
          return this.donnees.filter((donnee: IDonnee) =>
            donnee.entity.toLocaleLowerCase().indexOf(filterBy) !== -1);
        
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table *ngIf="donnees && donnees.length">
  <th>
    Entity
    <br>
    <input size=thSize ng-model="entity" class="entity"[(ngModel)]="listFilter">
  </th>
  <th>
    bdrID
    <br>
    <input size=thSize ng-model="bdrId" class="bdrId" [(ngModel)]="listFilter2">
  </th>
</table>

例如，我想在我的 JS 代码中获取输入的类名。

抱歉，如果我没有说清楚，您可以提出任何问题并提前感谢！

【参考方案1】：

所以，如果我理解正确，您的目标是在单击相应的 TH 元素时进行过滤？比如，在 Input 元素上调用点击事件？

如果是这种情况，您可以尝试以下方法： 为输入元素提供一个 ID： 输入 id="donnees" (click)="performFilter($event)" 对于两个 TH 元素也是如此。 出于某种奇怪的原因，它不允许我粘贴完整的表格代码。

我认为与其拥有多个数组，不如拥有一个包含所有数组的对象，这样您就可以根据从 $event 传递的 ID 进行过滤。 例如：filterObject => donnees[]、filteredDonnees[]

public performFilter(event) 
  return this.filterObject[event.target.Id].filter(// write your condition here);

如果这就是您要找的，请告诉我。

【讨论】：

你好，所以我在这个例子中有 2 列，然后当我在第一列的输入（就在下面）中写一些东西时，它会过滤它，然后当我在第二个输入，它将在使用第一个输入过滤后过滤剩余的数据。 （对不起，如果很难理解！）我会尝试你的方法，然后再回来（为我的代码调整它）谢谢！所以我并没有真正使用事件，只是在每次按下键并更改过滤器字符串时将过滤器添加到组件上

在你的例子中，我如何在没有事件的情况下访问输入的 id？

事件将是 (keyup)='performFilter($event)' 而不是点击。

好的，我要试试，我正试图理解这背后的逻辑。 filterObject 有什么用？我的意思是什么是 filterObject[event.target.id] 如果 id = entity ，这是否意味着它是一个实体数组？

与其拥有多个项目，不如拥有一个对象，这样您就可以通过传入 id 进行过滤。那只是为了更好的可读性和代码管理。可以说，如果您将来还有一个数组，则必须为该数组再添加一个“如果”条件。但是，如果您遵循此方法，您的 performFilter 对象将始终保持不变。如果您不想这样做，您仍然可以使用您拥有的方法，您可以在 if 条件中使用 Id 并执行与您相同的操作。 filterObject[event.target.id] => 如果 Id 是 donnees 它将过滤对象 donnees