Angular2 Table 过滤后无法正确构建

Question

我在 angular2 中过滤 table 时遇到问题。过滤效果很好，但删除过滤器 this does happen.

编辑当我启动程序时，过滤器是空的，视图没问题。当我过滤某些东西时，一切都很好。如果我再次删除过滤器，元素仍然存在，但不再位于 table 中......如您所见 here.

table 没有按计划重建。线条到处都是，但不再是 table。

我已尝试简化 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

找到问题了。

为了解决我的正常 table 对于智能手机来说太大的另一个问题，我使用了 css visible-sx-inline 和大 table: visible-sm -内联可见-md-内联...

我真的不知道为什么，但他们导致了问题。

@kimy82

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

Angular2 Table 过滤后无法正确构建

Angular2 Table does not build properly after filtering

html

javascript

typescript

angular2-template

angular