在angular2中通過html元素獲取模型

我需要通過angular2中的html元素訪問模型。在我的情況下，我使用ng2-dragula執行拖放操作，其服務只能訪問被拖動的html元素。我需要更新元素的相應模型。繼承人問題在github。在angular2中通過html元素獲取模型

來源

2016-04-15 Yaroslav Yakovlev

通過「元素的模型」你的意思是一些組件的屬性？一些代碼會有所幫助（Plunker首選）。 –

@MarkRajcok代碼在github上，鏈接在問題的最後。我的意思是使這個元素出現的angular2模型。檢查代碼後，如果不清楚，請告訴我。 –

我不知道有什麼辦法可以「從HTML元素到組件」 - 即給定一個HTML，我不知道如何獲得該元素使用HTML元素的引用...組件其模板具有該HTML元素。 –

如果您的ngFor從數組中編譯，您需要通過在bag元素上設置dragulaModel屬性來提供模型。

<ul [dragula]='"bag-one"' [dragulaModel]='items'> <li *ngFor="let item of items"></li> </ul>

，每當你重新定位的項目，該模型將被同步。在你的組件中，通過這樣做可以輕鬆獲得更新的模型。

this.dragulaService.drop.subscribe((value) => { 
     //let [bagName, e, el] = value; 
     console.log(this.items); 
    });

您會注意到項目被重新定位在您的模型中。

來源

2016-10-07 13:26:47 Abin

有沒有辦法明確地告訴哪個項目被移動？ – Umagon

您可以通過搜索由訂閱的參數提供的elementList中的element的索引來獲取您的物品的型號。

dragulaService.drop.subscribe(e => this.onDrop(e.slice(1)));

請參閱？

UPDATE：簡化（感謝Dracco）

private onDrop(args) { 

    let [e, el] = args; //element, elementList 
    let i = el.children.indexOf(e), 
    item = i+1? this.items[i] : null; 

    console.log(item); //The item 
}

this.items是存儲傳遞給dragula列表中的變量。（例如：[dragulaModel]="items"）。

我希望有一個更簡單的方法。告訴我，如果你找到一個！

老辦法：

private onDrop(args) { 

    let [e, el] = args; //element, elementList 
    let item; 
    for(let i in el.children){ 
     if(el.children[i]==e){ 
      item = this.items[+i]; 
      break;     
     } 
    } 

    console.log(item); //The item 
}

編輯：簡化了錯誤。

來源

2016-12-28 20:44:10 Umagon

簡單形式的相同方式：使用indexOf https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf – Dracco

我無法從中獲取模型。僅對html元素的引用 –

對不起，簡化形式有錯誤。我現在修好了。 – Umagon

確保將el.children包裝在ES6陣列中。

let i = el.children.indexOf(e)

應該

let i = Array.from(el.children).indexOf(e)

我還發現，檢索與從父列表索引中的子元素產生不可預知的結果，有時甚至產生新的不確定項。

其他的直接ID解決方案：

<ion-item *ngFor="let child of children" [id]="child"></ion-item>

然後在onDrop方法

console.log(e.id);

來源

2017-11-21 18:36:28

在angular2中通過html元素獲取模型

回答

相關問題