相关疑难解决方法(0)

在这种情况下,我正在向视图中显示学生列表(数组)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;
    } …

我想创建一个目录树,并且无论级别如何都可以访问所有项目,但是当我动态添加二级子级时,@ ViewChildren/@ViewQuery的QueryList不会更新:

import {bootstrap} from 'angular2/platform/browser';
import {Component, View, QueryList,ViewQuery, Query,ViewChildren} from 'angular2/core';


@Component({
    selector: 'item',
})
@View({
    template: `
        <button (click)="addChild()">Add Child</button>
        <ng-content></ng-content>
        <div *ngFor="#child of children; #i = index">
          <item> {{child.name}}</item>
        </div>
    `
})
export class Item {
    //public children = [ { name: 'Child 1', age: 22 } ];
    public children = [];
    addChild() {
        this.children.push({ name: 'Child' + (this.children.length + 1), age: 18 });
    }
}

@Component({
    selector: 'my-app'
})
@View({
    directives: [Item],
    template: `
        <button …