Ng2-Dragula 不使用自定义过滤器 - 问题

Question

我有两张表，一张是源表，另一张是目标表。当我将行从源表拖动到目标表时，我可以拖动行，但在目标表中，拖动的行引用源表实例，因此，当我过滤源表中的行然后拖动到目标表时，时间错误数据被删除到目标表中。我是角度新手，如果我做错了，请指导我。我已经更新了这段代码：-

源表：- FinedTunedData 目标表：- PlanningBoardData

  <tbody [dragula]='"bag"' [dragulaModel]='FineTunedDatas'>     
        <!-- <tr *ngFor="let FineTunedData of FineTunedDatas" dragHandle=".ui-panel-titlebar" (click)="GetCustomerDetailsByArticleID(FineTunedData)"> -->

        <tr *ngFor="let FineTunedData of FineTunedDatas | orderBy: key : reverse | familieFilter: family | searchfilter:filter | paginate: { itemsPerPage: 5, currentPage: f, id: 'f' };
          let i = index" (click)="setClickedRow(i)"  [class.active]="i == selectedRow" (click)="GetCustomerDetailsByArticleID(FineTunedData)" 
          >            
            <td class="th">{{FineTunedData.article_ID}}</td>
            <td class="th">{{FineTunedData.description}}</td>          
            <td class="th">{{FineTunedData.stockRAW}}</td>          
            <td class="th">{{FineTunedData.ordersRAW}}</td>
            <td class="th">{{FineTunedData.family}}</td>              
            <td class="th">{{FineTunedData.toProduceForecast}}</td>  
            <td class="th">{{FineTunedData.toProduce}}</td>

        </tr>
        <tr class="placeholder" *ngIf="!table1?.length > 0" id="no-drop">
            <td></td>
            <td></td>
            <td></td>  
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>



  <tbody  [dragula]='"bag"' [dragulaModel]='PlanningBoardDatas'> 
      <tr *ngFor="let PlanningBoardData of PlanningBoardDatas let i = index"
        [class.active]="i == selectedRow" [attr.data-id]="i" (click)="getLKoqValue(i, FineTunedData)">             
          <td class="th">{{PlanningBoardData.article_ID}}</td>
          <td class="th">{{PlanningBoardData.description}}</td>
          <td class="th">{{PlanningBoardData.navisionCode}}</td>       
          <td class="th">{{PlanningBoardData.stockRAW}}</td> 
          <td class="th">{{PlanningBoardData.ordersRAW}}</td>
          <td class="th">{{PlanningBoardData.family}}</td>
          <td class="th">{{PlanningBoardData.toProduceForecast}}</td>  
          <td class="th">{{PlanningBoardData.toProduce}}</td>
      </tr>
      <tr class="placeholder" dragHandle=".ui-panel-titlebar">         
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>
          <td class="th"></td>            
      </tr>
  </tbody>

PlanningBoardData.Component.ts:-

export class PlanningBoardComponent implements OnInit {
         PlanningBoardDatas: PlanningBoardData[]=[];
    ....



        ngOnInit()
          {
            this.dateForm = this.fb.group({
              range: null
            });

            let targertElement = Object.assign({}, this.FineTunedDatas);    
            this.PlanningBoardDatas.push(targertElement);

            localStorage.clear();
            this.colors= ['#7FDBFF', '#39CCCC', '#3D9970', '#2ECC40 ', '#01FF70 ', 
            '#FFDC00'];
          }
}

FinedTunedData 接口是：-

  export interface FineTunedData {
  id: number;
  Article_ID: number;
  Description:string
  OpenOrderFinish:number
  Stockfinish:number
  NettoStockfinish:number
  OpenOrderPriceRAW:number
  NavisionCode:string
  Family:string
  PieceRAW:number
  OrdersRAW:number
  StockRAW:number
  ToProduce:number
  ForecastSalesWeeks:number
  ToProduceForecast:number

}

PlanningBoardData 接口是：-

export interface PlanningBoardData {
  id: number;
  Article_ID: number;
  Description:string
  OpenOrderFinish:number
  Stockfinish:number
  NettoStockfinish:number
  OpenOrderPriceRAW:number
  Family:string
  PieceRAW:number
  OrdersRAW:number
  StockRAW:number
  ToProduce:number
  ForecastSalesWeeks:number
  ToProduceForecast:number
}

Answer 1

我建议您保留两个不同的列表，而不仅仅是一个FineTunedData。源表需要一个列表，目标表需要一个列表。

我看到您为源表中的列表应用了许多管道。在模板中应用（这么多）过滤器是一种不好的做法。它禁止可测试性，而且 html 模板也不应该是您保留逻辑的地方。考虑在.ts 文件中应用所有管道。应用管道后，您需要将结果保存在单独的变量中。比如说sourceList。

如前所述，您应该有一个单独的目标元素列表。说targetList。要解决目标元素保留对源元素的引用的问题，您可能需要在将新元素添加到目标列表之前创建源元素的副本。

let targetElement = Object.assign({}, sourceElement);
let targetList.push(targetElement); // you might want to add the element to a specific index.