Невозможно прочитать свойство 'native-element' из неопределенного Angular 8 - PullRequest
Новая
       63

Невозможно прочитать свойство 'native-element' из неопределенного Angular 8

0 голосов
/ 02 июля 2019

после того, как версии моего углового приложения обновились с углового 7 до углового 8 я столкнулся с проблемой усложнения с такими строками 

export class followupComponent implements OnInit {
    @ViewChild('message') messageElement: ElementRef;

    constructor(){}
    ...
}

Я читал, чтоновое определение требуется static параметр и изменить код 

@ViewChild('message', { static: true })) messageElement: ElementRef;

, и я подумал, что проблема решена.

Но нет, я принимаю ошибку времени выполнения:

не может прочитать свойство 'nativeElement' из неопределенного

, связанного с этим кодом

HTML: 

<div class="message">
    <div class="action-buttons">
        <img src="{{imgPath + '_Edit_Hover.png'}}" (click)="OnEdit(Followup)">
    </div>
    <textarea matInput #message [ngModel]="Followup.Message"></textarea>
</div>

TS: 

OnEdit(followup: Followup) {
    setTimeout(() => this.messageElement.nativeElement.focus());
}

Какое правильное определение ElementRef в угловых 8,

или - Как решить эту проблему?

1 Ответ

1 голос
/ 02 июля 2019

<textarea matInput #message [ngModel]="Followup.Message"></textarea> этот фрагмент кода, вероятно, нуждается в некоторой логике для отображения (например, *ngIf или *ngFor на родительских узлах или некотором асинхронном коде), что означает, что для его отображения требуется один цикл обнаружения изменений.

Согласно Угловые 8 документов

static - разрешать или нет результаты запроса перед изменением обнаружение выполняется (т.е. возвращает только статические результаты). Если эта опция не предусмотрено, компилятор вернется к своему поведению по умолчанию, который должен использовать результаты запроса, чтобы определить время запроса разрешающая способность. Если какие-либо результаты запроса находятся во вложенном представлении (например, * ngIf), запрос будет разрешен после запуска обнаружения изменений. В противном случае оно будет разрешено до запуска обнаружения изменений.

, поэтому вы должны установить static на false

@ViewChild('message', { static: false })) messageElement: ElementRef;

вот простая демонстрация https://stackblitz.com/edit/angular-qgwhcv

в демонстрационном примере поле ввода отображается через 3 секунды. если вы установили static:false и нажали кнопку «Изменить» после того, как ввод был отображен, он успешно фокусирует ввод. но если вы измените static:true и нажмете изменить после отображения ввода, вы увидите ошибку в консоли.

...