オーレリアは、次のように私はアウレリア構造を持つテーブルがすぐにぼかし

Question

後にクリックをトリガーする方法：

ここ

//app.ts 

products = [{ 
    name: "book", 
    options: [{ 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }] 
    }, { 
    name: "notebook", 
    options: [{ 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }, { 
     prop1: value1, 
     prop2: value2 
    }] 
    }, {..and so on}]; 


selectProduct(product) { 
    this.selectedProduct = product; 
} 

saveOption(option) { 
    // save the edited option value in the database 
} 

// app.html 

<tr repeat.for="product of products"> 
    <td click.trigger="selectProduct(product)">${product.name}<td> 
    <td repeat.for="option of product.options"> 
     <input type="text" value.bind="option.prop2" blur.trigger="saveOption(option)"> 
    </td> 
</tr> 

は私のオリジナルアプリで実際のテーブルは次のようになります、上記のコードは、の簡易版でありますテーブル。 table

基本的に、私は次の操作を行うことができるように、ユーザーを有効にする：任意の行の任意のセル

• 編集、およびセルブラーに、それはデータベースで編集した値を保存します。
• 製品名である行の最初の列をクリックして、特定の行を選択して強調表示します。

それは以下のユースケースを除いて、正常に動作：

• ユーザが任意の行のセルを編集し、最初の列name（任意の行、必ずしも上直ちにクリック編集された行）。

  理想的には、編集された値を保存し、その特定の行（編集後にクリックされた名前であり、必ずしも編集行ではない行）を同時に選択することが理想的です。 （blurはsaveOption(option)をトリガーし、nameをクリックするとselectProduct(product)をトリガーする）。

しかし、何が起こっていることは、それがblurにsaveOption(option)をトリガしますが、selectProduct(product)をトリガしません、何とかblurイベントがclickイベントを妨げている、です。

何か不足していますか、それとも2つのイベントコールを同時に達成するためのよりきれいな方法がありますか？ありがとう。 https://gist.run/ -

Answer 1

はあなたがここにあなたが何を意味するかの例を投稿する必要がありsaveOption方法に製品を渡し、saveOption

selectProduct(product) { 
    this.selectedProduct = product; 
} 

saveOption(option, product) { 
    // save the edited option value in the database 
    this.selectProduct(product); 
} 

<tr repeat.for="product of products"> 
    <td click.trigger="selectProduct(product)">${product.name}<td> 
    <td repeat.for="option of product.options"> 
     <input type="text" value.bind="option.prop2" blur.trigger="saveOption(option, product)"> 
    </td> 
</tr>