为什么这个组件在这个简单的插件中
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message:string = 'loading :(';
ngAfterViewInit() {
this.updateMessage();
}
updateMessage(){
this.message = 'all done loading :)'
}
}
投掷:
例外:App @ 0:5'中的表达式'我'{{message}}在检查后发生了变化.上一个值:'我正在加载:('.当前值:'我已经完成了加载:)'在[我是{{message}}在App @ 0:5中]
什么时候我正在做的是在我的视图启动时更新一个简单的绑定？
显然,Angular 2将使用管道而不是Angular1中的过滤器以及ng-for来过滤结果,尽管实现似乎仍然模糊,没有明确的文档.
也就是说,我想要实现的目标可以从以下角度来看待
<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>
如何使用管道实现？
在AngularJS中,您可以使用$watch函数来指定观察者观察范围变量的变化$scope.在Angular中观察变量(例如,组件变量)的等价物是什么？
出于某种原因,我必须在生产模式下运行我的应用程序.这些模式有什么区别？
我正在研究如何过滤Angular2中的数据数组.
我考虑使用自定义管道,但我觉得这不是我想要的,因为它似乎更倾向于简单的演示文稿转换,而不是过滤大量数据.
该数组如下:
getLogs(): Array<Logs> {
return [
{ id: '1', plate: 'plate1', time: 20 },
{ id: '1', plate: 'plate2', time: 30 },
{ id: '1', plate: 'plate3', time: 30 },
{ id: '2', plate: 'plate4', time: 30 },
{ id: '2', plate: 'plate5', time: 30 },
{ id: '2', plate: 'plate6', time: 30 }
];
}
我想通过id过滤这个.因此,当我在搜索栏中输入"1"时,它会更新以显示相应的值.
如果有一种方法可以做到这一点,我很想知道!
我创建了一个能够*ngFor与对象一起使用的管道.但是,更新对象时,管道不会更新.我已经找到了解决办法在这里通过使用状态的管道pure: false.
对于我的用例,这个解决方案在性能方面是不可接受的,因为它会为每次更改刷新管道(我几乎到处都使用这个管道来渲染复杂的元素).
有没有办法触发管道的手动刷新,所以它只在我想要时刷新？
这是一个plunker - 要查看问题,请尝试通过单击-按钮删除名称.如果添加,pure:false您将看到它将起作用:
@Pipe({name: 'keys', pure: false})
export class Keys implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
我想要的是在我的delName()函数中添加一些东西,以便更新管道......
我有下面的代码,它工作正常,它做的是ng为重复为列对象中的每列创建一列.
目前,它显示每列中卡片对象的每张卡片.
我想要它只是在列WHERE column.id = card.column中显示卡片
如何修改我的代码才能执行此操作？
import {Input, Output, EventEmitter, Component, Injectable} from 'angular2/core'
import {NgFor} from 'angular2/common'
import {Observable} from 'rxjs/Observable';
interface Card {
id?: number;
title?: string;
column?: number;
}
@Injectable()
export class DataService {
cards$: Observable<Array<Card>>;
private _cardsObserver: any;
private _dataStore: Array<Card>;
constructor(){
this._dataStore = [
{id: 1, title: 'Card A', column: 1},
{id: 2, title: 'Card B', column: 2},
{id: 3, title: 'Card C', column: 2}
];
this.cards$ = new Observable(observer =>
this._cardsObserver = observer).share(); …我收到此错误 无法读取null的属性'filter'
当我在角度2中应用滤镜时.我的代码是
http://plnkr.co/edit/K46jJsnmHiONuqIsnuzW?p=preview
import {Pipe} from 'angular2/core';
@Pipe({
name: 'sortByName',
pure: false,
})
export class SortByNamePipe {
transform (value, [queryString]) {
// console.log(value, queryString);
return value.filter((student)=>new RegExp(queryString).test(student.name))
// return value;
}
}
我有一系列模特.在模板中我使用管道
<div class="card-panel" *ngFor="let card of cards | sortByType">
<card-view [card]="card" [autoupdate]="true"></card-view>
</div>
在每个组件中,我都有一个更新数据的计时器.但是当模型更新时,管道不再运行.在这种情况下,有没有办法强制运行管道或做一些有角度的方式.
在卡片视图中,我有一个更新卡片变量的计时器.但Angular没有抓住这个变化来触发管道
我正在使用带有ngx-charts数据数组的过滤器管道.数据按2个日期过滤:fromDate和toDate.当使用使数组变小的日期进行过滤时,管道工作正常,但是当我首先使用较小的日期范围过滤然后再次使范围变大时,管道不能与原始数组一起使用,而是使用已经过滤的数组.
我已经做了其他的点子,从来没有遇到过这个问题,我不确定这里出了什么问题.也许有人可以帮助我.
管:
export class DateInRangePipe implements PipeTransform {
transform(obj: any[], from: Date, to: Date): any[] {
if (obj && from && to) {
obj.forEach(data => {
data.series = data.series.filter((item: any) => {
return this.inRange(item.name, from, to);
});
});
}
return [...obj];
}
inRange(date: Date, from: Date, to: Date): boolean {
return date.getTime() >= from.getTime() &&
date.getTime() <= to.getTime() ? true : false;
}
}
Chart.component.html部分
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="multi | dateinrangePipe: from: to"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel" …