आम तौर पर कोणीय में चीजों को दिखाने और छिपाने के लिए मैं घटक में एक चर बनाता हूं, उस चर को टॉगल करने वाले तत्व पर एक माउसओवर-माउसआउट ईवेंट बनाएं, और किसी भी तत्व पर एक एनजीआईएफ रखें जिसे मैं उस घटना से प्रभावित करना चाहता हूं (प्रदर्शन/छुपाएं)।

आप इसे इस तरह से नहीं देख सकते हैं यदि टेम्प्लेट ngFor के भीतर है। जब आप किसी भी गतिशील रूप से जेनरेट किए गए तत्वों पर होवर करते हैं तो यह हर शो/छिपाने को ट्रिगर करेगा। इस प्रकार मेरा प्रश्न है, कोणीय स्टार निर्देशों का उपयोग करके मैं घटनाओं को समान रूप से गतिशील कैसे बना सकता हूं *ngFor-dynamically-generated-template-elements ताकि जब मैं उन टेम्पलेट तत्वों में से एक पर होवर करता हूं तो इसकी संबंधित घटना उत्सर्जित होती है? अधिक विशेष रूप से, (नीचे स्टैकब्लिट्ज देखें) जब मैं इसके संबंधित टेम्पलेट ईवेंट पर होवर कर रहा होता हूं तो मुझे एक टूलटिप कैसे दिखाई देती है?

लोग इसके आसपास कैसे जाते हैं। क्या आप गतिशील रूप से जेनरेट किए गए परिवर्तनीय नाम बना सकते हैं? क्या यह एक स्केलेबल दृष्टिकोण भी होगा जब आपके पास सैकड़ों हजारों पंक्तियां हों? शायद नहीं। वहां कोई रास्ता अवश्य होना चाहिए।

यहाँ मेरा Stackblitz प्रदर्शित कर रहा है कि मैं किस बारे में बात कर रहा हूं।

खाका:

<h1>Tool tip example</h1>
<p>
  Events on dynamically generated template from *ngFor :)
</p>
<p>
  Requirements: Make a tooltip appear with the rest of the information on hover.
</p>


<table>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>gender</th>
  </tr>
  <tr *ngFor="let object of this.data.arrayOfObjects">
    <td (mouseenter)="tooltipHover=!tooltipHover" (mouseleave)="tooltipHover=!tooltipHover" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="this.tooltipHover" class="tooltip">
Tooltip:
more info here

  </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td>


  </tr>


</table>

अवयव:

import { Component } from '@angular/core';
import {Data} from './../../data'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tooltipHover:boolean =false;

  constructor(public data: Data){}


}
1
imnickvaughn 17 अगस्त 2018, 19:34
1
आपका स्टैकब्लिट्ज काम नहीं कर रहा है
 – 
Chellappan வ
17 अगस्त 2018, 19:38
स्टैकब्लिट्ज काम कर रहा है लेकिन यह आपके प्रश्न से संबंधित नहीं था
 – 
Chellappan வ
18 अगस्त 2018, 05:58
क्षमा करें, इसकी अद्यतन
 – 
imnickvaughn
20 अगस्त 2018, 17:49

2 जवाब

सबसे बढ़िया उत्तर

कुछ इस तरह का प्रयास करें

खाली सरणी बनाएं

tooltipHover=[]

<tr *ngFor="let object of this.data.arrayOfObjects; let i = index">
    <td (mouseenter)="tooltipHover[i]=!tooltipHover[i]" (mouseleave)="tooltipHover[i]=!tooltipHover[i]" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="this.tooltipHover[i]" class="tooltip">
Tooltip:
more info here    
  </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td> 
  </tr>

उदाहरण:https://stackblitz.com/edit/angular-xbwxrw

2
Chellappan வ 17 अगस्त 2018, 19:43

आपके पास पूरी सूची के लिए एकल चर है, इसलिए इसे प्रत्येक पंक्ति के लिए ट्रिगर किया जाता है। इसके बजाय आपके पास प्रत्येक पंक्ति टूलटिप दृश्यता की एक सूची होनी चाहिए। इसे देखें स्टैकब्लिट्ज

मैंने आपके एचटीएमएल को निम्नलिखित में बदल दिया

 <tr *ngFor="let object of this.data.arrayOfObjects; let i = index">
    <td (mouseenter)="onMouseEnter(i)" 
      (mouseleave)="onMouseLeave(i)" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="tooltipHover[i]" class="tooltip">
          Tooltip:
          more info here
       </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td>

</tr>

और इसके लिए आपकी component फ़ाइल

 tooltipHover: boolean[] = [];

  constructor(public data: Data){}

  onMouseEnter(index) {
    this.tooltipHover[index] = true;
  }

  onMouseLeave(index) {
    this.tooltipHover[index] = false;
  }
3
Bunyamin Coskuner 17 अगस्त 2018, 19:44