javascript - आयन-सेगमेंट टैब स्विच करने के बाद डेटा प्रदर्शित नहीं करते हैं




angularjs cordova ionic-framework ionic2 (2)

सेगमेंट पर स्विच करने के बाद मुझे चार्ट प्रदर्शित करने में परेशानी हो रही है वर्तमान में मेरे पास 2 सेगमेंट, इंडेक्स और एडिट हैं I सूचकांक पर मैं सफलतापूर्वक Chart.js के साथ एक चार्ट प्रदर्शित करता है

चार्ट के लिए कोड:

diagram = function() {
    var finished = 0;
    var pending = 0;

    for (var i = 0; i < this.goal.activities.length; i++) {
      var current = this.goal.activities[i];
      if (current.completed == true) { finished++ } else { pending++ }
    }
    this.piChart = new Chart(this.piCanvas.nativeElement, {
      type: 'doughnut',
      data: {
          labels: ["finished activities", "pending activities"],
          datasets: [{
            label: '# of Votes',
            data: [
              finished
              ,
              pending
            ],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)'
            ],
            hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB"
            ]
          }]
      }
    })
 }

और फ़ंक्शन बुला रहे हैं:

ionViewDidEnter() {
  this.diagram();
}

अब पृष्ठ पर यह आरंभिक रूप से डायग्राम लोड को सफलतापूर्वक देखने और एक सुंदर डोनट में परिणाम दिखाता है। समस्या तब होती है जब मैं एक सेगमेंट पर क्लिक करता हूं और फिर प्रारंभिक पृष्ठ पर वापस आऊंगा (चित्र के साथ)। अब चार्ट चला गया है मैं अभी भी इसे एचटीएमएल में देख रहा हूं लेकिन यह सिर्फ दृश्य में प्रस्तुत नहीं करता है

दृश्य में कोड:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{ goal.title }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="goalTab">
    <ion-segment-button value="progress">
      Progress
    </ion-segment-button>
    <ion-segment-button value="activities">
      Actitivies
    </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="goalTab">
    <ion-card *ngSwitchCase="'progress'">
      <ion-card-header>
        Overview of activities for: {{ goal.title }}
      </ion-card-header>
      <ion-card-content>
        <canvas #piCanvas></canvas>
      </ion-card-content>
    </ion-card>

    <ion-list *ngSwitchCase="'activities'">
      <ion-item>
        <ion-card-header>
          Something other segment
        </ion-card-header>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

उम्मीद है कि किसी ने समस्या का पता लगाने में और मेरी मदद करने में सक्षम है, धन्यवाद!

अद्यतन करें

इसका चार्ट वाला कैनवास एचटीएमएल में नहीं है इसके आरंभिक लोड पर मैं निम्नलिखित को देखता हूं (जो सही है):

और किसी अन्य सेगमेंट पर स्विच करने के बाद और उस पर वापस जाएं, जिसे चार्ट (गलत) देना चाहिए:

तो किसी तरह से खंडों पर स्विच करने के बाद चार्ट सही ढंग से प्रारंभ नहीं किया जा रहा है।


Answers

चार्ट के आयन-कार्ड में इसे आज़माएं:

   <ion-card [style.display]="goalTab == 'progress' ? 'block' : 'none'">
      <ion-card-header>
         Overview of activities for: {{ goal.title }}
      </ion-card-header> 
      <ion-card-content> 
         <canvas #piCanvas></canvas>
      </ion-card-content> 
   </ion-card>

किसी सरणी की शुरुआत में जोड़ने के लिए .unshift() का उपयोग करें।

TheArray.unshift(TheNewObject);

unshift लिए unshift देखें और यहां अन्य सरणी विधियों पर दस्तावेज़ के लिए देखें।

.push() , जैसे कि सरणी के अंत के लिए .shift() और .unshift() है, सरणी की शुरुआत के लिए .shift() और .unshift()







javascript angularjs cordova ionic-framework ionic2