TypeError：プロパティ 'display'を未定義に設定できません

Question

私はイオン性のアプリを開発しています。メインページにはボタンがあり、詳細ページにはカスタムスタイルのdivがあります。ユーザーがボタンをクリックすると、riempiSotterraneo（）が呼び出され、詳細ページが表示されます。私はdivのスタイルをページのscssとapp.scssに追加しようとしましたが、このエラーはスタイルが存在しないようになっています。私は間違って何をしていますか？前もって感謝します。

クレア-sotterraneo.ts

import {Component, ViewChild} from '@angular/core'; 
    import {IonicPage, NavController, NavParams, Platform} from 'ionic- 
angular'; 
    import {CommonFunctions} from "../../commons/functions"; 


@IonicPage() 
@Component({ 
    selector: 'page-crea-sotterraneo', 
    templateUrl: 'crea-sotterraneo.html', 
}) 
export class CreaSotterraneoPage { 
    @ViewChild('risultato') risultato ; 

    constructor(public platform: Platform, 
      public navCtrl: NavController, 
      public navParams: NavParams, 
      private commonFunctions: CommonFunctions) { 

    this.riempiSotterraneo(); 

    } 



    riempiSotterraneo(){ 
console.log('CreaSotterraneoPage riempiSotterraneo inizio'); 
    this.svuotaTutto(); 
    var sott = this.commonFunctions.generaSotterraneo(); 
console.log('CreaSotterraneoPage riempiSotterraneo sott:' + sott); 
    if (sott == "stanza"){ 
    this.riempiStanza(); 
    } else if (sott.toLowerCase().startsWith("c")){ 
    this.riempi(this.getCorridoioImage(sott)); 
    } else { 
    this.riempi(sott); 
    } 

} 

svuotaTutto() { 
    console.log('CreaSotterraneoPage svuotaTutto inizio'); 

} 

riempiStanza() { 

} 

getLungo(direz){ 
console.log('CreaSotterraneoPage getLungo inizio'); 

} 

getLato(aper, direz, ingresso){ 
    console.log('CreaSotterraneoPage getLato inizio'); 

} 

riempi(risultato){ 
    console.log('CreaSotterraneoPage riempi inizio'); 
    this.platform.ready().then(() => { 
    this.risultato.style.display = 'block'; 
    this.risultato.innerHTML = risultato; 
    }); 
} 

getCorridoioImage(corridoio) { 
    console.log('CreaSotterraneoPage getCorridoioImage inizio'); 

} 

} 

クレア-sotterraneo.html

<ion-header> 
<ion-navbar> 
<ion-title>{{ 'scopri_sotterraneo' | translate}}</ion-title> 
</ion-navbar> 
</ion-header> 

<ion-content padding> 
    <div #risultato class="risultato">&nbsp;</div> 

</ion-content> 

クレア-sotterraneo.scss

page-crea-sotterraneo { 
.risultato { 
font-size: 12pt; 
border: solid 2px black; 
padding: 10px; 
overflow-y: auto; 
overflow-x: auto; 
/*display: flex;*/ 
flex-direction: column; 
} 
} 

Answer 1

この行：

<div #risultato class="risultato">&nbsp;</div> 

は次のようになります。

<div id="risultato" class="risultato">&nbsp;</div>