typescript 组件声明、模板变量声明和元素引用不包含此类成员
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48992824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The component declaration, template variable declarations, and element references do not contain such a member
提问by imnickvaughn
this is probably a simple fix. The element is supposed to slide out from the top of the page on hover. My code is working as intended, but I am getting this error.
这可能是一个简单的修复。该元素应该在悬停时从页面顶部滑出。我的代码按预期工作，但出现此错误。
error:
错误：
[Angular] Identifier 'compartmentOpen' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
I've tried defining it in the template on the element with the ngIf like this: #compartmentOpen It makes the error go away but then the code doesn't run because its trying to get the truthiness of the entire element.
我尝试使用 ngIf 在元素的模板中定义它，如下所示： #compartmentOpen 它使错误消失，但代码没有运行，因为它试图获得整个元素的真实性。
I've also tried defining it like this: compartmentOpen; in the component, but that doesn't do anything.
我也试过这样定义它：compartmentOpen; 在组件中，但这没有任何作用。
template:
模板：
<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>
component:
零件：
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();
}
}
回答by Kraken
Actually you problem that you are trying to replace model with primitive boolean value. compartmentOpenin your case is a div element model, containing a lot of stuff. Good news that you can extend your model like this
实际上你的问题是你试图用原始布尔值替换模型。compartmentOpen在你的情况下是一个 div 元素模型，包含很多东西。好消息，你可以像这样扩展你的模型
<div #compartmentOpen
(mouseover)="compartmentOpen.open = true"
(mouseout)="compartmentOpen.open = false"
class="inner-container">
and your *ngIfstatement will be
你的*ngIf陈述将是
*ngIf="compartmentOpen.open"
And all will work as you need without errors.
并且一切都将按照您的需要工作而不会出错。
回答by t3__rry
You have to declare you property inside of your component:
您必须在组件内声明您的属性：
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();
}
}
Edit: And remove the template reference variable #compartmentOpenwhich serves no purpose here
编辑：并删除#compartmentOpen此处无用的模板引用变量
