не может прочитать стиль свойства undefined при использовании viewchild со ссылкой на шаблон в angular8 - PullRequest
Новая
       11

не может прочитать стиль свойства undefined при использовании viewchild со ссылкой на шаблон в angular8

0 голосов
/ 06 октября 2019

Я использовал viewchild со ссылкой на шаблон, чтобы применить цвета во входном и текстовом элементах html. И я получил ошибку времени выполнения, когда запустил программу.

Я использую angular8 и ionic4.

Ошибка: 

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'style' of undefined
TypeError: Cannot read property 'style' of undefined
    at HomePage.ngAfterViewInit (home.page.ts:21)
    at callProviderLifecycles (core.js:28206)
    at callElementProvidersLifecycles (core.js:28171)
    at callLifecycleHooksChildrenFirst (core.js:28153)
    at checkAndUpdateView (core.js:38386)
    at callWithDebugContext (core.js:39716)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:39299)
    at ViewRef_.detectChanges (core.js:27092)
    at StackController.push../node_modules/@ionic/angular/dist/fesm5.js.StackController.setActive (fesm5.js:3601)
    at IonRouterOutlet.push../node_modules/@ionic/angular/dist/fesm5.js.IonRouterOutlet.activateWith (fesm5.js:4246)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

home.page.ts: 

export class HomePage implements AfterViewInit {

  @ViewChild('country', { static: true }) countryRef: ElementRef;
  @ViewChild('person', { static: true }) personRef: ElementRef;

 constructor(){
 }

 ngAfterViewInit() {
    this.personRef.nativeElement.style.backgroundColor = 'brown';
    this.countryRef.nativeElement.style.color = 'red';
  }
}

home.page. html: 

<ion-content>
  <ion-input type="text" placeholder="Enter country name" #country></ion-input>
  <ion-text #person> steve </ion-text>
</ion-content>

1 Ответ

0 голосов
/ 06 октября 2019

Переменные ссылки шаблона указывают на компоненты, а не на элементы html .

Это означает, что то, что вы фактически получаете с @ViewChild, является экземплярами этих компонентов (IonInputComponent,IonTextComponent) и не ElementRef. 

countryRef: IonInputComponent // instead of ElementRef
personRef: IonTextComponent // instead of ElementRef

Таким образом countryRef.nativeElement // undefined.

Если вы хотите изменить стили динамически, попробуйте подключитькомпоненты и настройте ссылочные переменные шаблона таким образом, чтобы они указывали на элементы HTML, которые связывают действительные ионные компоненты.

например, 

<ion-content>
  <span #country>
    <ion-input type="text" placeholder="Enter country name"></ion-input>
  </span>


  <span #person>
    <ion-text> steve </ion-text>
  </span>
</ion-content>
...