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.

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

1 个答案: