过滤

Question

我在使用angular2过滤表时遇到问题。 过滤效果非常好，但删除过滤器this does happen。

修改 当我启动程序时，过滤器为空，视图正常。当我过滤东西时一切都很好。如果我再次移除过滤器，那么元素就在那里，但不再在表格中了......正如您可以看到here。

该表未按计划重建。线路到处都是，但不再在桌子上了。

我试图简化html代码。如果您需要了解更多信息，请询问！

<table class="visible-lg-inline visible-md-inline visible-sm-inline table table-condensed">
   <!-- the table head is defined here-->
   <!--TABLE BODY-->
   <tbody *ngFor="let detail of filteredDetails; let posi = index">
       <tr>
           <td (click)="showDetail(detail.itemId)">
               <div><b>{{detail.itemName}}</b></div>
               <div>{{detail.itemId}}</div>
           </td>
           <!-- the other cells as seen in picture-->
       </tr>
       <!-- only shown if showDetail is true -->
       <tr *ngIf="detail.showDetail">
           <td colspan="5">
                <!-- some other divs and another table -->
           </td>
       </tr>
    </tbody>
    <!--FILTER-->
    <tbody>
       <tr>
          <td>
              <!-- some divs -->
          </td>
          <td colspan="3">
             <input value="" [(ngModel)]="searchValue" (ngModelChange)="filterDetails()"/>
          </td>
          <td>
            <!-- the button has nothing to do with the filter -->
          </td>
        </tr>
     </tbody>
</table>
<table class="table table-condensed visible-xs-inline fixed">
   <!-- the table head is defined here-->
   <!--TABLE BODY-->
   <tbody *ngFor="let detail of filteredDetails; let posi = index">
       <tr>
           <td (click)="showDetail(detail.itemId)">
               <div><b>{{detail.itemName}}</b></div>
               <div>{{detail.itemId}}</div>
           </td>
           <!-- the other cells as seen in picture-->
       </tr>
       <!-- only shown if showDetail is true -->
       <tr *ngIf="detail.showDetail">
           <td colspan="5">
                <!-- some other divs and another table -->
           </td>
       </tr>
    </tbody>
    <!--FILTER-->
    <tbody>
       <tr>
          <td>
              <!-- some divs -->
          </td>
          <td colspan="3">
             <input value="" [(ngModel)]="searchValue" (ngModelChange)="filterDetails()"/>
          </td>
          <td>
            <!-- the button has nothing to do with the filter -->
          </td>
        </tr>
     </tbody>
</table>

这是简化的Typescript代码（更像是javascript - 这就是为什么我使用那个标签 - 希望这很好）

public filteredDetails: POSStockDetailWeb[];
public searchValue: string;

//the constructor an the init functions

filterDetails() {
  if (this.searchValue == null || this.searchValue == "")
    this.filteredDetails = this.POSStock.safePOSStockDetails;
  else {
    console.log(this.searchValue);
    this.filteredDetails = [];
    for (let detail of this.POSStock.safePOSStockDetails) {
      if ((detail.itemId.indexOf(this.searchValue) !== -1) || 
          (detail.itemName.indexOf(this.searchValue) !== -1)) {
        this.filteredDetails[this.filteredDetails.length] = detail;
      }
    }
  }

}

感谢您的帮助！

如果您需要更多输入，请询问！

Answer 1

我已经尝试了它并且它工作当我更改过滤器时它会过滤。我试过的代码是：

HTML：

 <table>
      <!-- the table head is defined here-->
      <!--TABLE BODY-->
      <tbody *ngFor="let detail of filteredDetails; let posi = index">
       <tr>
           <td>
               <div><b>{{detail.itemName}}</b></div>
               <div>{{detail.itemId}}</div>
           </td>
           <!-- the other cells as seen in picture-->
       </tr>

       </tbody>
       <!--FILTER-->
       <tbody>
        <tr>
          <td colspan="3">
               <input value="" [(ngModel)]="searchValue" 
                   (ngModelChange)="filterDetails()"/>
          </td>
          <td>
            <!-- the button has nothing to do with the filter -->
          </td>
        </tr>
       </tbody>
     </table>

Ts代码：

    public filteredDetails: any[] = [];
    public safePOSStockDetails: any[] = [{itemName: 'a', itemId: '1'}, 
      {itemName: 'eea', itemId: '45'}, {itemName: 'eia', itemId: '12'}];
    public searchValue = '';

    filterDetails() {
     if ( this.searchValue === '')
        this.filteredDetails = this.safePOSStockDetails;
     else {
        this.filteredDetails = [];
        for (const detail of this.safePOSStockDetails) {
            if ((detail.itemId.indexOf(this.searchValue) !== -1) || 
            (detail.itemName.indexOf(this.searchValue) !== -1)) {
                this.filteredDetails.push(detail);
            }
        }
    }

Answer 2

发现问题。

为了解决我的普通表对于智能手机而言太大的另一个问题，我使用了css visible-sx-inline和大表：visible-sm-inline visible-md-inline ...

我不知道为什么，但他们已经引起了这个问题。

@ kimy82

感谢您的帮助！ 我会对带有类的简单版本的结果感兴趣。 （如果你还有时间和时间）