angular – 组件声明,模板变量声明和元素引用不包含此类成员

发布时间：2020-12-17 17:29:54 所属栏目：安全来源：网络整理

导读：这可能是一个简单的修复.该元素应该在悬停时从页面顶部滑出.我的代码按预期工作,但我收到此错误. 错误： [Angular] Identifier 'compartmentOpen' is not defined. The component declaration,template variable declarations,and element references do not

这可能是一个简单的修复.该元素应该在悬停时从页面顶部滑出.我的代码按预期工作,但我收到此错误.

错误：

[Angular] Identifier 'compartmentOpen' is not defined. The component declaration,template variable declarations,and element references do not contain such a member

我已经尝试使用ngIf在元素的模板中定义它,如下所示：#compartmentOpen
它使错误消失但随后代码无法运行,因为它试图获得整个元素的真实性.

我也试过像这样定义它：
compartmentOpen;
在组件中,但没有做任何事情.

模板：

<div class="container">
  <div #compartmentOpen
    (mouSEOver)="compartmentOpen = true"
    (mouSEOut)="compartmentOpen = false"
    class="inner-container">



    <div class="grid-center">

      <div class="z-bottom"
        *ngIf="compartmentOpen"> Facebook Login coming soon!
        <br>
        <br>
        <br>
        <br>
      </div>


      <button (click)="googleLogin()"
        class="btn btn-primary google-btn-size animated bounce">
        Login with Google
      </button>
      <br>

      <div id="wave">
        <span class="dot dot-ani"></span>
        <span class="dot dot-ani"></span>
        <span class="dot dot-ani"></span>
      </div>
    </div>
  </div>
</div>

零件：

import { AuthService } from './../auth.service';
import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent {

  constructor(private auth: AuthService) { }

  googleLogin() {
    this.auth.googleLogin();
  }

}

解决方法

实际上你有问题,你试图用原始布尔值替换模型.在你的情况下,compartmentOpen是一个div元素模型,包含很多东西.好消息,您可以像这样扩展您的模型

<div #compartmentOpen
    (mouSEOver)="compartmentOpen.open = true"
    (mouSEOut)="compartmentOpen.open = false"
    class="inner-container">

你的* ngIf语句将是

*ngIf="compartmentOpen.open"

所有这些都可以正常工作而不会出错.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!