我有一个简单的ngFor循环,它也跟踪电流index.我想将该index值存储在属性中,以便我可以打印它.但我无法弄清楚它是如何工作的.
我基本上有这个:
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
我想存储#i属性中的值data-index.我尝试了几种方法,但没有一种方法有效.
我在这里有一个演示:http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp？p = preview
如何将index值存储在data-index属性中？
有人知道如何获取组件模板中定义的元素吗？聚合物使得它真正用简单的$和$$.
我只是想知道如何在Angular中实现它.
以教程为例:
import {Component} from '@angular/core'
@Component({
selector:'display'
template:`
<input #myname(input)="updateName(myname.value)"/>
<p>My name : {{myName}}</p>
`
})
export class DisplayComponent {
myName: string = "Aman";
updateName(input: String) {
this.myName = input;
}
}
如何从类定义中捕获por input元素的引用？
我的Angular代码出了什么问题？我正进入(状态:
Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...
HTML
<ol class="breadcrumb">
<li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
<li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li>
<li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li>
</ol>
我在尝试使用Angular *ngFor和*ngIf同一个元素时遇到了问题.
当尝试遍历集合中的集合时*ngFor,集合被视为null并因此在尝试访问模板中的属性时失败.
@Component({
selector: 'shell',
template: `
<h3>Shell</h3><button (click)="toggle()">Toggle!</button>
<div *ngIf="show" *ngFor="let thing of stuff">
{{log(thing)}}
<span>{{thing.name}}</span>
</div>
`
})
export class ShellComponent implements OnInit {
public stuff:any[] = [];
public show:boolean = false;
constructor() {}
ngOnInit() {
this.stuff = [
{ name: 'abc', id: 1 },
{ name: 'huo', id: 2 },
{ name: 'bar', id: 3 },
{ name: 'foo', id: 4 },
{ name: 'thing', id: 5 },
{ …@Component和@DirectiveAngular有什么区别？他们似乎都做同样的任务,并具有相同的属性.
有什么用例以及何时优先使用另一个？
目前的文档只讨论获取路由参数,而不是实际的路径段.
例如,如果我想找到当前路线的父母,那怎么可能呢？
我在Angular中构建了一个基本的应用程序,但是我遇到了一个奇怪的问题,我不能将服务注入到我的一个组件中.它注入了我创建的其他三个组件中的任何一个.
首先,这是服务:
import { Injectable } from '@angular/core';
@Injectable()
export class MobileService {
screenWidth: number;
screenHeight: number;
constructor() {
this.screenWidth = window.outerWidth;
this.screenHeight = window.outerHeight;
window.addEventListener("resize", this.onWindowResize.bind(this) )
}
onWindowResize(ev: Event) {
var win = (ev.currentTarget as Window);
this.screenWidth = win.outerWidth;
this.screenHeight = win.outerHeight;
}
}
它拒绝使用的组件:
import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {MobileService} from '../';
@Component({
moduleId: module.id,
selector: 'pm-header',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css'],
directives: [ROUTER_DIRECTIVES, …我有一个父组件(CategoryComponent),一个子组件(videoListComponent)和一个ApiService.
我有大部分工作正常,即每个组件可以访问json api并通过observable获取其相关数据.
目前视频列表组件只是获取所有视频,我想将其过滤为特定类别中的视频,我通过将categoryId传递给子项来实现此目的@Input().
CategoryComponent.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这有效,当父CategoryComponent类别更改时,categoryId值将通过via传递,@Input()但我需要在VideoListComponent中检测到这一点并通过APIService(使用新的categoryId)重新请求视频数组.
在AngularJS中,我会对$watch变量做一个.处理这个问题的最佳方法是什么？
我是Angular的新手,并试图通过新的做事方式加快速度.
我想将一个select元素绑定到一个对象列表 - 这很容易:
@Component({
selector: 'myApp',
template: `<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
</select>`
})
export class AppComponent{
countries = [
{id: 1, name: "United States"},
{id: 2, name: "Australia"}
{id: 3, name: "Canada"},
{id: 4, name: "Brazil"},
{id: 5, name: "England"}
];
selectedValue = null;
}
在这种情况下,看起来selectedValue将是一个数字 - 所选项目的ID.
但是,我实际上想要绑定到country对象本身,以便selectedValue是对象而不仅仅是id.我尝试改变选项的值,如下所示:
<option *ngFor="#c of countries" value="c">{{c.name}}</option>
但这似乎不起作用.它似乎将一个对象放在我的selectedValue中 - 但不是我期待的对象.您可以在我的Plunker示例中看到这一点.
我也尝试绑定到change事件,以便我可以根据所选的id自己设置对象; 但是,看起来更改事件在更新绑定的ngModel之前触发 - 这意味着我无法访问此时新选择的值.
是否有一种干净的方法将选择元素绑定到具有Angular 2的对象？
我正在编写一个具有属性的Angular组件Mode(): string.我希望能够以编程方式设置此属性,而不是响应任何事件.问题是在没有浏览器事件的情况下,模板绑定{{Mode}}不会更新.有没有办法手动触发此更改检测？