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

Question

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

错误：

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

我尝试使用ngIf在元素的模板中定义它，如下所示：#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();
  }

}

Answer 1

实际上，您遇到的问题是您试图用原始布尔值替换模型。compartmentOpen您的情况是一个div元素模型，其中包含很多东西。您可以像这样扩展模型的好消息

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

您的*ngIf陈述将是

    *ngIf="compartmentOpen.open"

一切都会按您的要求工作而不会出错。