ionSelect in ion-segment show error undefined is not an object

Ionic Framework ionic-v3
1

Hello,

I want to display the chart using chart.js when user select on segment and it throw error undefined is not an object (evaluating ‘this.doughnutCanvas.nativeElement’). If I use button (click) instead of segment (ionSelect) it works properly. Any solution?

<ion-content class="card-background-page">
	<ion-toolbar no-border-top>
		<ion-segment [(ngModel)]="home"> 
			<ion-segment-button value="missions">Missions </ion-segment-button>
			<ion-segment-button value="news" (ionSelect)="test()"> News </ion-segment-button>
		</ion-segment>
	</ion-toolbar>

	<div [ngSwitch]="home">
		<div *ngSwitchCase="'missions'">
			..........
		</div>
		<div *ngSwitchCase="'news'">
			<ion-card>
				<ion-card-header>
		        	Doughnut Chart
		      	</ion-card-header>
		      	<ion-card-content>
		      		<canvas #doughnutCanvas></canvas>
		      	</ion-card-content>
			</ion-card>
		</div>
	</div>
</ion-content>

ts

    import { Component, ViewChild } from '@angular/core';

    import { NavController } from 'ionic-angular';
    import { SlideMissionPage } from '../slide-mission/slide-mission';
    import { Chart } from 'chart.js';


    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
    	 @ViewChild('doughnutCanvas') doughnutCanvas;
    	  doughnutChart: any;

      constructor(public navCtrl: NavController) {

      }
      test(){
      	this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
     
                type: 'doughnut',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56",
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ]
                    }]
                }
     
            });
      }
      test1(){
      	console.log("test1");
      }

    }