Angular2组件无法访问模板中的类属性
是因为模板和组件是分离的，模板中的类属性只能在模板中使用，无法直接在组件中访问。这是Angular框架的设计原则之一，通过这种方式实现了模板和组件的解耦，提高了代码的可维护性和可测试性。
解决这个问题的方法是使用Angular的数据绑定机制。数据绑定可以将组件中的属性与模板中的元素进行关联，实现数据的双向绑定。具体来说，可以通过以下几种方式来实现：
- 属性绑定（Property Binding）：通过使用方括号将组件中的属性绑定到模板中的元素属性上。例如，可以将组件中的一个属性绑定到模板中的一个输入框的value属性上，使得输入框的值与组件中的属性保持同步。
- 事件绑定（Event Binding）：通过使用小括号将模板中的事件绑定到组件中的方法上。例如，可以将模板中的一个按钮的点击事件绑定到组件中的一个方法上，当按钮被点击时，触发组件中的方法执行相应的逻辑。
- 双向绑定（Two-Way Binding）：通过使用方括号和小括号的组合将组件中的属性与模板中的元素属性和事件进行双向绑定。例如，可以将组件中的一个属性与模板中的一个输入框的value属性和input事件进行双向绑定，实现输入框的值与组件中的属性的双向同步。
通过使用数据绑定，可以在组件和模板之间实现数据的传递和同步，解决了组件无法直接访问模板中的类属性的问题。在实际应用中，可以根据具体的需求选择适合的数据绑定方式来实现功能。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供了稳定可靠的云计算基础设施，可以满足各种规模的应用需求；腾讯云云数据库MySQL提供了高性能、高可用的数据库服务，适用于各种类型的应用场景。
更多关于腾讯云云服务器（CVM）的信息，请访问：https://cloud.tencent.com/product/cvm
更多关于腾讯云云数据库MySQL的信息，请访问：https://cloud.tencent.com/product/cdb_mysql
相关·内容
在我们的角2/ Ionic 2(final/rc0 0)项目中，我们的组件中，我使用：
protected contentTarget: ViewContainerRef;
ngOnInit() {
this.contentTarget.createComponent(componentFactory);
}
AoT编译器说：
Error at ....: Property 'contentTarget' is protected and only accessible within class 'IncludeTemplateComponen
浏览 4提问于2016-10-13得票数 8
回答已采纳
在angular2中单击某个按钮时，如何更改该按钮的文本？
例如，将按钮文本从"Save“更改为"Saving...”然后还将其设置为禁用。
我知道如何在AngularJS、jQuery和普通JS中做到这一点，我对如何在Angular2中做到这一点也有一些想法，但我想确保在涉及到Angular2时，我没有以某种过时或令人费解的方式做到这一点。
浏览 1提问于2017-01-05得票数 6
回答已采纳
我正在使用最新的角2β(45?)并试图将ngClass附加到指令选择器标识的元素。用于切换类的变量不更新。
我怀疑这是两件事之一：
Angular2只是不那样工作，所以这是一个范围问题；如果我在指令选择器元素中放置一个div并将ngClass附加到该div中，它就能工作。不过，我还是不想那么做。
因为我对窗户事件有反应。我试过使用观察者、setTimeout黑客和区域。不走运。
有办法做我想做的事吗？现在不是这样了吗？
示例代码是从内存中编写的，因为我目前无法访问它：
@Directive({
selector: "nav",
templateU
浏览 2提问于2016-03-31得票数 3
回答已采纳
我试图在我的页面上显示/隐藏一个div，其中的条件是基于const enum的使用：
export const enum TipoMensagem {
Sucesso,
Erro
}
这就是我想在我的观点上写的：
<div [class]="msgInformacao.msgKind === MsgKind.Error ? 'text-danger' : ' text-info'"><strong>{{msgInformacao.info}}</strong></div>
这将导致运
浏览 2提问于2016-10-06得票数 0
回答已采纳
来自官方的。一个ViewChild
Configures a view query.
View queries are set before the ngAfterViewInit callback is called.
这个解释非常小，我仍然不太明白它是用来做什么的。
考虑一下我发现的一个博客中的。
删除@ViewChild(TodoInputCmp)对TodoInputCmp中的代码没有影响
有人能给我一些洞察力吗？
谢谢
浏览 6提问于2016-04-14得票数 30
回答已采纳
我的*ngFor列表项中有一个button元素：
<li class="cart__item" *ngFor="let item of cartService.cart$ | async">
<button class="button button--decr" (click)="decrItem()">-</button>
<form action="#">
<input type="text" id="q
浏览 10提问于2017-02-09得票数 1
回答已采纳
我对学习具有C/C++/Java面向对象设计经验的web应用程序相当(非常)陌生。我正在尝试学习带有打字本的，并且正在学习示例。
相关片段(示例中的进一步步骤稍加修改)
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
export class AppCompone
浏览 5提问于2016-10-16得票数 1
回答已采纳
1回答
我正在学习Angular2，为此我创建了一个示例代码。
我有一个可重用的组件Card，它应该接收一个参数：
import { Component, Input } from '@angular/core'
@Component({
selector: 'card',
templateUrl: '../templates/card.html'
})
export class Card {
@Input() title;
}
这个title参数应该是一个string。
到目前为止，这是该组件的html模板：
<div cla
浏览 5提问于2016-05-25得票数 0
回答已采纳
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
在ES6中，有模板字符串功能，也就是说，我们可以像这样形成/连接字符串(带反引号)
const name = 'John';
const intro = `My name is ${name}`;
console.log(intro);
在Angular 2 Component模板中，我们有双花括号的插值，我们可以用它来插入来自变量的值。
@Component({
selector: 'selector-test-tag',
template: `
<div>
<p>My name is ${name
浏览 2提问于2016-11-04得票数 13
回答已采纳
1回答
我是angularJs2的新手。我的要求是在单个组件中需要多个模板。就像我有ForgetPasswordComponent一样，有两个名字叫forgot-password和password/reset的路线。所以我想在diff路由上调用diff模板。目前，forgot-password.component.html正在调用forgot-password路由，现在我想调用diff。password/reset路由上的模板。这是我的密码。
app-routing.module.ts
{ path: 'forgot-password', component: ForgetPassw
浏览 2提问于2016-12-01得票数 0
我正在导出一个包含2个变量和2个函数的组件，以更改这些变量(即布尔变量)。
现在，当我用(单击)触发我的函数时，我得到了错误：
原始异常: ReferenceError:未定义着陆
但是，如果我将着陆和投资组合定义为变量(即var landing = true; )，我就不能用*ngIf来评估它们
这是我的组件的出口：
export class NavigationComponent {
landing = false;
portfolio = true;
changeMiniNavLanding = function() {
landing =
浏览 2提问于2016-03-30得票数 0
回答已采纳
有没有人能帮我解决这个ngIf问题，我试图在密钥不存在的时候隐藏注销，当它存在于localStorage中时显示它。我对ngIf中的多个条件感到困惑，但检查是正确的。
此检查正被用作指令。
checkSession() {
var checkKey = localStorage.getItem('sessionKey');
if(checkKey == null){
var showLogout = false;
console.log('null key: ', checkKey);
} else {
showL
浏览 0提问于2016-08-16得票数 3
回答已采纳
我有一个基本的角度应用程序，包括以下三个组件：
汽车组件，它是主或父组件.
carousel-component ( car-component的子组件，*使用ng-content)
child-component (旋转木马子组件)
子组件中的按钮在单击时使用EventEmitter()发出一个事件。从柱塞中的代码可以看出，car组件(它是主组件或主组件)能够侦听并捕获其子组件(即，在car组件模板中更新的和{text})发出的事件。
然而，carousel-component是子组件的直接父级，它无法捕获相同的事件，并且在旋转木马组件中没有更新文本。
car-compo
浏览 4提问于2017-02-20得票数 1
Iv'e最近开始了一个新的项目，并决定给角2一个机会。作为一名前骨干开发人员，我现在面临的工作类型对我来说是很新的。
我正在尝试构建一个非常简单的应用程序:我想有一个教室对象，其中有一个学生名单。在我看来，每个组件(教室、学生)应该是不同的组件，这样每个组件都有自己的模板。
我希望将模板完全分开，并在课堂模板上循环遍历学生模板并呈现学生模板。
例如:我的教室组件想要这样:从‘@角质/核心’导入{ component，OnInit}；从‘app/Student.Component’导入{Student}；
@Component({
selector : 'cla
浏览 1提问于2016-07-25得票数 2
回答已采纳
在Angular2项目中，我有一个名为layout的文件夹，在这个文件夹中，我将某些页面的常见布局拆分为其他3个组件(3个文件夹-标头、边栏和页脚)。我有一个锚牌(.)在我的头上。在点击它时，我需要将标题扩展到屏幕的左端，同时侧边栏需要隐藏。在再次击中锚标签时，两者都应进入实际位置(切换)。我试过像ngClass=“{‘隐藏-侧边栏’：标志}”class=“修复头”.
其中的标志是一个布尔变量，并切换它的值击中锚标记。我将这个变量的状态存储在localStorage中，以便可以在另一个组件侧栏上访问它。但这帮助我将标题扩展到屏幕的左侧，侧边栏保持不变。
我认为在锚标签(按钮)上实现这两个目标还
浏览 4提问于2017-09-07得票数 2
回答已采纳
在angular2父组件中，我有以下代码，imgs是一个私有类变量。下面的代码可以让image变量传递给它的子组件。那正是我想要的。
然而，我对image变量的作用域感到困惑。它没有任何访问修饰符，比如public或private，但它的行为类似于public变量。有人能解释一下它是如何工作的吗？
<li *ngFor="let image of imgs">
<child [image]="image"></child>
</li>
浏览 0提问于2016-11-02得票数 1
我使用的是双句柄nouislider.它工作得很好，但是当我试图从代码中更新句柄位置时，我总是会得到错误: set不是一个函数。我遗漏了什么？
//HTML
<nouislider #mrangeslider [connect]="true" [step]=".05"
[(ngModel)]="sliderMRangeSel" (change)="updateSliderM($event)"
[min]="sliderMBounds[0]"
[ma
浏览 0提问于2019-02-15得票数 1
回答已采纳
1回答
Angular路由器的[routerLink]指令将CSS类router-link-active添加到活动链路。我想写一个基于这个类的指令。
import { Directive, ElementRef} from '@angular/core';
@Directive({selector: '.router-link-active'})
export class HighlightDirective {
constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor
浏览 3提问于2016-06-26得票数 2
1回答
我有一个具有多重结果的多维数组：
books: any[] = [
{
name: "The Name book",
chapter: [{
name: 'Alpha',
pages: '180'
}, {
name: 'Beta',
pages: '100'
}]
},
{
name: "Jungle Book",
chapter: [{
浏览 2提问于2016-05-23得票数 0
回答已采纳
这是我的主要组成部分：
import {Component} from 'angular2/core';
import {HeaderComponent} from './header.component';
import {FooterComponent} from './footer.component';
@Component({
selector: 'my-app',
templateUrl: './app/templates/app.component.html',
direct
浏览 2提问于2016-04-01得票数 0
回答已采纳
2回答
我开始做一些关于使用Angular2的研究，其中一个问题我找不到解决办法。我有一个要求，根据从我的模型接收到的数据，我希望为给定组件加载不同的模板。这主要与维护不同的布局有关，这取决于我收到的数据。这个是可能的吗？
谢谢
浏览 4提问于2015-12-23得票数 6
回答已采纳
我想访问angular2组件中的全局javascript变量，反之亦然。我在脚本标记中指定了index.html中的默认值，我可以在angular2组件中读取这个值。但是，当我编辑/重新分配一些其他值到angular2组件中的变量时，我无法访问/获取javascript中已编辑的值。
我在main.ts的时候
export function main(dateColumnName: any)
{
platformBrowserDynamic([{ provide: 'dateColumnName', useValue: dateColumnName }]).bootst
浏览 4提问于2017-06-02得票数 0
回答已采纳
我是Angular的新手，我还在努力理解它。我关注了微软虚拟学院的课程，它很棒，但我发现他们所说的和我的代码行为之间有一点差异！具体地说，我尝试过“将一个组件放入另一个组件中”，如下所示：
@Component({
selector: 'parent',
directives: [ChildComponent],
template: `
<h1>Parent Component</h1>
<child></child>
`
})
浏览 0提问于2017-04-19得票数 52
回答已采纳
你好，亲爱的，极客，我对angular2有个问题:我正在用angular2开发一个应用程序
(menuComponent, menuView.html)
(listProductComponent, listProductView.html)
(detailProductComponent, detailProductView.html)
我在menuView.html中有一个按钮来添加像这样的新产品
<ul class="nav nav-tabs">
<li><a class="active" [routerLink]=&
浏览 2提问于2016-03-01得票数 2
回答已采纳
3回答
我用角2编写了两个服务，其中一个是Http的基本定制类，它具有一些自定义功能(目前它看起来是基本的，但它将扩展)：
ServerComms.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
@Injectable()
export class ServerComms {
private url = 'myservice.com/service/';
constructor (public http: Http) {
浏览 5提问于2016-04-15得票数 0
回答已采纳
当我使用angular2绑定到元标记属性时，我得到了一些奇怪的结果。例如，如果我有以下绑定。
<meta name="{{x}}">
并且x被解析为"hello"，则HTML输出将为
<hello></hello>
或者，当我添加第二个属性时，它将成为hello标记上的一个属性。我发现了很多关于angular2不能很好地处理元标签的信息，但这个问题很奇怪。你知道是否有可能进行某种绑定吗？
(请注意，我也尝试了其他绑定方法，在其他标签中，元标签只是搞砸了)
代码
@Component({
selector: 'h
浏览 0提问于2016-04-13得票数 0
11回答
如何扩展/继承组件？
、、、
我想为Angular 2中已经部署的一些组件创建扩展，而不必几乎完全重写它们，因为基础组件可能会发生更改，并希望这些更改也反映在其派生组件中。
我创建了这个简单的例子，试图更好地解释我的问题：
使用以下基本组件app/base-panel.component.ts
import {Component, Input} from 'angular2/core';
@Component({
selector: 'base-panel',
template: '<div class="panel" [style.backg
浏览 172提问于2016-04-07得票数 185
在我的Angular2应用程序中获取复选框显示默认选项“--请选择--”页面加载时，我遇到了问题。我以前成功地做到了这一点，但在这个特定的例子中，我似乎无法做到这一点。我将展示我的代码，然后解释，正如我所展示的。
以下是我的相关控制器代码：
import {Component} from "@angular/core";
import {ProductService} from "../../services/product.service";
import {Subscription} from "rxjs";
import {Activate
浏览 1提问于2017-02-14得票数 2
回答已采纳
我正在学习angular2 (我有angular1背景)。在学习Angular2时，我遇到了上面提到的例子。
1)我不理解config.js的用法。此外，我还想了解config.js中使用的"map“对象。
2)我一直在尝试导出用friend.ts文件编写的“朋友”模块。但不知何故，我无法出口，或者我不知道如何出口。看下面的代码，
app.ts
import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2'
import {FirstComponent} from './first
浏览 3提问于2015-11-30得票数 0
回答已采纳
2回答
我想重用组件的网页版本，我的网站，以及移动版本。网站有很大的不同，所以响应性设计是不可行的。
理想情况下，应该有一种基于屏幕分辨率提供多个templateUrls的方法，但我认为这样的东西并不存在。
示例：
@Component({
selector: 'multiplatform-component',
templateUrl-sm: 'app/sm.html',
templateUrl-md: 'app/md.html',
})
解决这个问题的最好方法是什么？
浏览 2提问于2016-04-16得票数 2
回答已采纳
哦，angular2...why这么难？
<input type="text" formControlName="exposure" type="hidden">
<label>{{exposure}}</label>
如果我在输入中使用formControlName，则该值是正确的。
如何在模板中获取曝光的值？标签上是空白的
浏览 0提问于2017-03-11得票数 24
3回答
我在我的项目中使用了angular2和laravel 5.3。在laravel中，当用户登录时，服务器会将用户的权限发送到angular中进行授权处理。所以我写了一个守卫来保护路由不被无法访问的用户访问。下面是我的卫士类代码：
export class AccessGuard implements CanActivate{
permissions;
currentRoute;
constructor(private authService:AuthService,private router:Router){
this.permissions = this.authService.g
浏览 1提问于2016-09-28得票数 4
回答已采纳
作为cannot read property listArr of undefined，我得到了一个运行时错误。我需要在多个组件中重用相同的数组。这就是为什么我要使用全局数组
我已经添加了相关的code.please检查它。
Global.ts :
export class Global {
public static listArr: ObservableArray<ListItem> = new ObservableArray<ListItem>();
}
ts文件：
Global.listArr.push(data.items.map(item =&
浏览 7提问于2017-08-31得票数 6
回答已采纳
我想用html文件替换我的代码模板。我该怎么做呢？
Greeting.annotations = [
new angular.ComponentAnnotation({
selector: 'greeting'
}),
new angular.ViewAnnotation({
template: '<h1>Hello!</h1>'
})
];
我想要这样的东西
template: 'path/to/my/template.html'
我使用Angular2和E
浏览 8提问于2015-11-23得票数 2
回答已采纳
我有一个计数为0的计数器，我希望根据计数器值设置元素的背景色：
绿色: 20或以上
橙色: 10至20
红色:9或更低
我所做的是对元素应用3个不同的类，并给每个类一个不同的条件：
<p [class.green]="20 <= counter" [class.orange]="10 <= counter && counter <= 20" [class.red]="10 > counter">
{{ counter }}
</p>
是否有更好(或至少更正确)
浏览 4提问于2017-05-23得票数 1
2回答
我想知道，是否所有的异步事件和回调都可以通过包装一个区域中的所有组件逻辑(包括组件内的非组件指令的逻辑)来追溯到特定的源组件，那么假设所有的更改都遵循单向流，那么只需要检查该源组件以及任何具有来自源组件的更改输入的子组件的更改。
这是理解的声音吗？
此更改检测策略在Angular2中可用吗？
为什么Angular2在任何异步(XHR)事件之后检测所有组件上的更改？
浏览 2提问于2016-06-28得票数 2
我正在尝试用从get请求中检索的信息填充引导样式表。
我得到的信息很好，但它不是以理想的方式输出。
这是我的密码；
视图组件
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<
浏览 6提问于2016-11-17得票数 5
回答已采纳
2回答
我有5页左右
http://localhost:4201/app?part=1
http://localhost:4201/app?part=2
http://localhost:4201/app?part=3
....
我有5张图片，我想用ngIf (如果可能的话)将每一张图片匹配到每一页。
为此目的，在我的组件中，我有一行，它告诉我现在有哪一部分。
ngOnInit() {
this.pageNumber = this.activatedRoute.snapshot.queryParams["part"];
}
此外，我也有我的组成部分
myImg = '
浏览 2提问于2017-07-12得票数 0
回答已采纳
我正在构建一个下拉组件，它允许控件的用户配置要绑定到数据源的属性。下面是一个用法示例：
<ex-dropdown name="Office" valuemember="CODE" displaymember="DESC" [datasource]="cities"></ex-dropdown>
下面是数据的一个例子：
var data =[
{
"ID": 0,
"CODE": "00",
"DESC
浏览 0提问于2016-03-08得票数 0
我正在制作一个可重用的Angular2组件，我希望用户能够指定一个模板字符串或templateUrl，然后该组件将通过属性或通过某种服务方法设置它。
在角1中，这很简单，我们可以这样做：
// somewhere else in app
myService.setTemplateUrl('path/to/template.html');
// directive definition
function myDirective(myService) {
return {
template: function(element, attrs) {
retu
浏览 4提问于2015-12-17得票数 5
回答已采纳
我正在将我的应用升级到angular2 RC，我有一个关于ngModule的问题。
假设我使用了一些componentsModule，它包含了我想在我的应用程序中使用的所有组件。
为什么我需要在每个模块中分别导入它们？为什么我不能直接告诉appModule --“嗨，确保每个人都收到这个。”
在使用him的每个模块中反复需要该模块不是在浪费资源吗？或者是angular2将它们作为单例使用？如果是这样，那就不成问题了吗？-如果我确实需要新的提示怎么办？
浏览 12提问于2016-09-24得票数 3
我只想根据某些条件if(colValue == "Id")隐藏表中某行的最后一列'Id‘。
<thead>
<tr>
<th *ngFor="let colValue of headerRow" [hidden]="colValue == Id">{{colValue}}</th>
</tr>
下面是行列。
否|日期|名称|类型|状态|余额|备注| Id
我不想隐藏，但我想隐藏。我怎样才能做到这一点呢？谢谢
浏览 0提问于2017-02-11得票数 0
当我们想到在Angular2或Angular1.X中使用template时，我们知道下面是一种基本的编写方式：
template: './template-ninja.html'
在Angular1.X中，我们可以使用$templateCache.put()缓存所有的模板，如下所示：
var myApp = angular.module('Ninja', []);
myApp.run(function($templateCache) {
$templateCache.put('templateNinja.html', 'This is
浏览 1提问于2015-12-22得票数 13
2回答
我使用数组来存储组对象的列表和光对象列表的数组。我想显示html中的第一组，以及所有连接到该组的灯。然后是下一组和相关的灯光等等.
<div>
<ul>
<li *ngFor="let group of hueGroups">
{{group.name}}
<li *ngFor="let light of hueLights; let i = index">
{{hueLights[group.lights[i]].name}}
</li>
&
浏览 2提问于2017-05-30得票数 10
回答已采纳
我想在实例化angular2组件时调用一个函数，但是我得到了以下错误: TypeError: self.context.dummyFunc不是一个函数
下面是一个人为的例子，但会告诉你我的问题。假设我们有以下组件：
import { Component } from '@angular/core';
@Component({
selector: 'myItem',
template: `<div>This will work->{{dummyFunc()}}</div>`,
})
e
浏览 3提问于2016-08-08得票数 7
回答已采纳
我是angular2的新手，我正在尝试构建一个带有嵌套选择器的组件。我怎么能构建这样的组件呢？如果我的问题不清楚，请看下面，我需要构建一个可以像这样使用的组件。有没有什么我可以遵循的方法或途径。请帮帮忙
<parent [width]='100'>
<child [title]='hi'></child>
<child [title]='hello'></child>
</parent>
浏览 0提问于2016-10-13得票数 0
2回答
什么会导致Angular2 (rc5)应用程序中的内存泄漏？如何预防呢？
错误/正确的代码示例将非常感谢。
浏览 0提问于2016-08-18得票数 17
回答已采纳
我正在尝试使用枚举值来设置HTML属性的选定值：
export enum MyEnum {
FirstValue,
SecondValue
}
export function MyEnumAware(constructor: Function) {
constructor.prototype.MyEnum = MyEnum;
}
@MyEnumAware
@Component({
templateUrl: "./lot-edit.component.html",
styleUrls: ["./lot-edit.component
浏览 8提问于2017-02-26得票数 23
在heros教程中，app.component.ts代码如下所示：
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} d
浏览 3提问于2017-04-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
