Блог

Главная - Вопросы по программированию - ссылочная переменная шаблона выдает _r0 не является ошибкой функции

ссылочная переменная шаблона выдает _r0 не является ошибкой функции

#angular

#angular

Вопрос:

У меня есть поле поиска, которое запускает метод поиска при нажатии enter.

  <mat-form-field class="search-field">
    <mat-label>Search</mat-label>
    <input type="text" (keyup.enter)="search($event)"  matInput #search>
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>

когда я нажимаю кнопку поиска, я получаю следующую ошибку

 ERROR TypeError: _r0 is not a function
    at UploadPhotoComponent_Template_input_keyup_enter_4_listener (upload-photo.component.html:4)
    at executeListenerWithErrorHandling (core.js:14296)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14331)
    at platform-browser.js:582
    at platform-browser.js:1278
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27149)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.runGuarded (zone-evergreen.js:133)
    at NgZone.runGuarded (core.js:27060)

Однако, когда я изменил ссылочную переменную шаблона с #search на #searchFiled, она работает нормально

   <mat-form-field class="search-field">
    <mat-label>Search</mat-label>
    <input type="text" (keyup.enter)="search($event)"  matInput #searchFiled>
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>

В чем причина этого?

Комментарии:

1. Проблема, вероятно, в том, что вы определяете #search как ссылку, в то время как у вас уже есть функция поиска в этой области шаблона..

2. Похоже, это так. Существует ли конкретное правило, в котором говорится, что ссылка на шаблон и имя функции не могут быть одинаковыми?

3. Не особенно, но имело бы смысл, что это должно быть проблематично. Вы можете ссылаться на поиск в шаблоне.. что может означать либо метод поиска в области видимости компонента, либо локальную ссылку. Таким образом, у вас в основном есть дублирующий идентификатор в вашей области. Точно так же, как это не разрешено (или возможно) внутри вашего компонента, это также не должно быть возможным или разрешено в области вашего шаблона (поскольку это также область компонента).

Ответ №1:

В моем случае я назвал свою функцию входа так же, как одну из моих локальных переменных шаблона

 <form #login="ngForm">
            <input type="email" name="Email" #Email="ngModel" required email [(ngModel)]="email" placeholder="Enter Email">
                
            <br>
            <input type="password" name="Password" #Password="ngModel" required [(ngModel)]="password" placeholder="Enter Password">
            <br>
            <span *ngIf="showMsg">Login Failed !</span>
            <button type="button" (click)="login()" [disabled]="login.invalid">LOGIN</button>
</form>

Ответ №2:

Проверьте свой html. Вероятно, у вас есть такой тег:

 <ng-template #searchFiled>

Если вы замените #searchFiled на #search, вы также должны изменить его на ng-template .