在这种情况下,我正在向视图中显示学生列表(数组)ngFor:
<li *ngFor="#student of students">{{student.name}}</li>
每当我将其他学生添加到列表中时,它都会更新.
然而,当我给它一个pipe到filter由学生的名字,
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
在我在过滤学生姓名字段中输入内容之前,它不会更新列表.
这是plnkr的链接.
Hello_world.html
<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>
sort_by_name_pipe.ts
import {Pipe} from 'angular2/core';
@Pipe({
name: 'sortByName'
})
export class SortByNamePipe {
transform(value, [queryString]) {
// console.log(value, queryString);
return value.filter((student) => new RegExp(queryString).test(student.name))
// return value;
} …我有一个指令,它是一个@Input接受一个类.
@Directive({selector: 'my-directive'})
@View({directives: [CORE_DIRECTIVES]})
export class MyDirective {
@Input() inputSettings : SettingsClass;
@Input() count : number;
onChanges(map) {
console.log('onChanges');
}
}
该指令用于html:
...
<my-directive [input-settings]="settings" [count]="settings.count"></my-directive>
...
如果settings.count已更改,onChanges则会触发.如果设置类中的任何其他属性发生更改,则不会触发.
如何检测设置中的任何属性是否有变化？
当引用可以隐藏/"销毁"的输入时(因为使用了*ngIf并且某些元素被销毁),由angular2语法#(在下面的示例中为#test)创建的局部变量不起作用,即使元素存在于页面中.
代码是:
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<button (click)="focusOther(test)">test</button>
<input #test *ngIf="boolValue" >
`
})
export class AppComponent {
private isVisible = false;
focusOther(testElement){
this.isVisible = true;
alert(testElement);
testElement.focus();
}
}
警报显示"未定义",因为没有任何内容传递给该函数.
是否有解决方案使其工作？我的目标是集中一个将要创建的元素.
Mark Rajcok给出的解决方案:使用一个使用elementRef并在元素上调用.focus()的afterViewInit创建一个指令.
有关第1部分的工作版本,请参阅此plunker:http://plnkr.co/edit/JmBBHMo1hXLe4jrbpVdv？p = preview
一旦修复了"创建后焦点"的问题,我需要一种重新聚焦()组件的方法,比如"test.focus()"(其中#test是输入的局部变量名,但不能像我之前演示的那样使用).
Mark Rajcok提供的多种解决方案
我正在使用Angular2 quick startdemo进行演示TypeScript.一切都运行良好,但在完成演示后,我在浏览器控制台中看到了一条消息
Angular 2正在开发模式下运行.调用enableProdMode()以启用生产模式.
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { enableProdMode } from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
题
有人可以解释一下吗？
在Angular 1中,更改检测是通过脏检查$ scope层次结构.我们将在模板,控制器或组件中隐式或明确地创建观察者.
在Angular 2中,我们不再有$ scope,但我们覆盖了setInterval,setTimeout等.我可以看看Angular如何使用它来触发$ digest,但是Angular如何确定改变了什么,特别是考虑到Object.observe从未进入浏览器？
这是一个简单的例子.服务中定义的对象在setInterval中更新.每个间隔重新编译DOM.
Angular如何能够告诉AppComponent正在观看该服务,以及该服务属性的值是否已经改变？
var InjectedService = function() {
var val = {a:1}
setInterval(() => val.a++, 1000);
return val;
}
var AppComponent = ng.core
.Component({
selector: "app",
template:
`
{{service.a}}
`
})
.Class({
constructor: function(service) {
this.service = service;
}
})
AppComponent.parameters = [ new ng.core.Inject( InjectedService ) ];
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(AppComponent, [InjectedService])
});
我遇到了问题ngOnChange.我有以下组件:
@Component({
selector:'user-table',
template: `...`,
})
export class UserTable implements OnChanges{
@Input() users: User[];
years:string[];
constructor(private _usersCollection:UsersCollection){
}
ngOnChanges(){
if (this.users.length)
{this.years =this._usersCollection.createYearsArray(this.users)}
}
}
但是,如果条件仅被检查一次 - 何时this.users尚未从服务器获取,因此其长度为0.我如何找到处理这种异步输入的解决方案？
更新数组,就像我设置以下日志时一样:
console.log('ON FIRST INIT' , this.programs);
this.years = this._usersCollection.createYearsArray();
console.log(this.years);
setInterval(()=>{
console.log('IN INTERVVAL' , this.programs);
},1000);
控制台输出是:
ON FIRST INIT []
UsersTable.component.ts:21 []
UsersTable.component.ts:23 IN INTERVVAL [Object, Object, Object, Object]
所以我昨天回答了一个问题,我觉得我在复制代码并且没有完全理解我在做什么,直到我开始深入了解Observables.我的问题是我总是在应用和查找文档以满足我的需求时遇到了一些困难.这意味着我仍然非常依赖于了解其他人如何使用代码,因此我可以更好地掌握这些概念.
我花了大部分时间在相当优秀的文档中阅读这篇文章https://github.com/Reactive-Extensions/RxJS/tree/master/doc
我开始理解可观察者对承诺的想法和力量.到目前为止,我有三个问题;
我的其他问题确实涉及如何在我的代码中更有效地使用它们.
我将为接下来几个问题发布我的代码
@Component({
selector: 'my-app',
providers: [FORM_PROVIDERS, RoleService, UserService],
inputs: ['loggedIn'],
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet],
template: `<body>
<div *ngIf="loggedIn[0]=== 'true'">
<nav class="navbar navbar-inverse navbar-top" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li>
<a [routerLink] = "['/RolesList']">Roles</a>
</li>
<li>
<a [routerLink] = "['/UserList']">Users</a>
</li>
<li>
<a [routerLink] = "['/UserRolesList']">User Roles</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a [routerLink] = "['/Login']" (click)="logout()">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<router-outlet></router-outlet>
</div> …我正在建立一个角度2应用程序.自发布以来,文档发生了很大的变化,引起了混乱.我能做的最好的事情就是解释我想要做的事情(在Angular 1中这很容易)并希望有人可以帮助我.
我已经使用JWT创建了一个登录服务.登录成功后,我返回一个用户对象.
我有一个loginComponent(将数据绑定到模板)和loginService(处理https调用)
我有一个维护用户对象的userService.
我有一个userComponent,用于呈现用户数据.
问题是,一旦用户登录,我不清楚让userService在名为"user"的对象中检索新数据的最佳方法,然后userComponent更新模板上的用户对象.只需将观察者放在userService.user对象上,就可以轻松实现角度1.
我尝试输入和输出无效,eventEmitters,Observables和getter and setters.getter和setter工作,但强迫我将所有内容存储在"val()"中
有人可以告诉我实现这个目标的最佳方法吗？
提前致谢!
我是Angular的新手,对Angular JS 1.x一代的经验很少.不过我的问题是关于Angular 2.我在Components 这里阅读和https://angular.io/docs/ts/latest/guide/architecture.html
我正在使用TypeScript,我的问题是:可以说Component是一个类(非@component注释)类似于Model(在Asp.Net MVC中),因为我们可以将html控件与组件类中定义的字段绑定或者它更像是控制器吗？或者还有更多我遗失的东西？
第二个网址中有一个声明,其中说:
我们在一个类中定义一个Component的应用程序逻辑 - 它支持视图的作用
上面的语句增加了我的困惑,因为我们可以在一个绑定了html的类中做很多事情.在文本更改时,我们可以远程检查某些内容或按钮单击,我们可以调用方法,所有这些都可以在组件类中定义.那么组件的限制到底是什么？我们可以像模特或类似控制器一样对待它们吗？
请帮我澄清一下
我想能够在angular2之外的变量发生变化时观察和更新.所以,假设我在外部javascript文件中有这个:
var test = 1;
如何将此变量绑定到组件中的属性？
@Component({
...
})
export class MyComponent {
watchy = window.test;
}
根据这个答案,显然这应该是有用的.
但事实并非如此.如果我在控制台中更改变量,则变量不会更新显示在模板中.我错过了什么吗？
我们能够$watch在复杂对象上应用，如何在Angular 2中进行类似操作。
角度1
$scope.data = {name : "somvalue"}
$scope.$watch('data.name', function(newValue, oldValue) {
scope.counter = scope.counter + 1;
});
角度2
export class MyData{
name: string;
}
export class MyComponent implements OnInit {
@Input() data: MyData;
constructor(private ds: MyService){
this.data = ds.data;
}
// $watch('data.name', function(newValue, oldValue) {
// scope.counter = scope.counter + 1;
// });
}
现在，如果data.name服务发生变化，如何监视组件本身的变化，请注意数据不是可观察的，它只是一个常规对象。
更新资料
提前致谢！！
我想知道你是否有人能解释Angular2正在使用的依赖关系.到目前为止,我发现angular2总是使用以下内容:
RxJs
Angular2 Polyfills
ZoneJS
你能用简单的话来解释我们每个人应该负责什么,为什么我们需要这些？
谢谢
angular ×12
angularjs ×3
typescript ×2
angular-pipe ×1
asp.net-mvc ×1
javascript ×1
observable ×1
rxjs ×1