web-dev-qa-db-ja.com

コンポーネント宣言、テンプレート変数宣言、および要素参照には、そのようなメンバーは含まれていません

これはおそらく簡単な修正です。要素はホバー時にページの上部からスライドするはずです。コードは意図したとおりに機能していますが、このエラーが発生します。

エラー：

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

}
angulartypescriptvariables
4
imnickvaughn

実際には、モデルをプリミティブなブール値に置き換えようとしているという問題があります。あなたの場合のcompartmentOpenはdiv要素モデルであり、たくさんのものを含んでいます。このようにモデルを拡張できるという朗報

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

そしてあなたの *ngIfステートメントは

    *ngIf="compartmentOpen.open"

そして、すべてがエラーなしで必要に応じて機能します。

6
Kraken

コンポーネント内でプロパティを宣言する必要があります：

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 {
  compartmentOpen = false;
  constructor(private auth: AuthService) { }

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

編集：そして、テンプレート参照変数#compartmentOpenを削除します。

3
t3__rry