Question

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

错误：

[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();
  }

}

Answer 1

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

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

并且您的*ngIf语句将是

    *ngIf="compartmentOpen.open"

所有这些都可以正常运行。

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

1 个答案: