相关疑难解决方法(0)

显然,Angular 2将使用管道而不是Angular1中的过滤器以及ng-for来过滤结果,尽管实现似乎仍然模糊,没有明确的文档.

也就是说,我想要实现的目标可以从以下角度来看待

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

如何使用管道实现？

我在Angular 2的下拉列表中预先选择值时遇到了问题.

我在组件中设置了一组颜色,我成功绑定到下拉列表.我遇到的问题是在页面init上预先选择一个值.

该行[selected]="car.color.id == x.id"应选择已在汽车模型上设置的值,this.car.color = new Colour(-1,'');但这仅在我将汽车颜色ID设置为列表中的最后一项(在本例中为黑色)时才有效this.car.color = new Colour(4,'');

我使用的是最新版本的Angular(rc3),并且在rc1和rc2中遇到过相同的问题.

这是一个显示问题的掠夺者.

https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

另一个奇怪的方面是,在查看元数据时,Angular已将所选值设置为true.

但下拉仍然显得空洞.

这些相关问题似乎是一个单独的问题.

Angular 2设置select的开始值

将选择元素绑定到Angular 2中的对象

如何在Angular2中的对象数组上使用select/option/NgFor

问候

史蒂夫

组件模板

   <div>
        <label>Colour</label>
        <div>
            <select [(ngModel)]="car.colour"">
                <option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option>
            </select>
        </div>
    </div>

零件

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car = new Car();
    colours = Array<Colour>();

    ngOnInit(): …

我正在玩角2 alpha 44.

我有一个树模型并使用递归来显示它.每组包含"标准","细分"和其他"组".我们可以在任何级别删除和添加所有这些元素.

当我删除元素然后在同一级别添加其他元素时,有一种奇怪的行为.新订单是错误的,新元素获得了更大的position属性,数组在此属性上排序,但它们出现在元素被删除的位置.

新阵列将记录在控制台中,并以正确的顺序显示.如果使用"SHOW/HIDE"按钮删除并添加所有树,则视图现在的顺序正确.

您可以在此plunker中看到此行为并轻松理解:

1. 删除第一个元素
2. 添加一个新元素
3. 请参阅视图中的顺序不正确,并且与控制台日志内部的顺序不同
4. 在"显示/隐藏"按钮上单击2次
5. 看到视图中的顺序现在是正确的

是否有类似ng1 trackBy的ng2 NgFor？我在源头内找不到它.

假设我有一个数组[1,2,3]。我想迭代所有项目并将每个项目绑定到ngModel。当我在更改第一个元素后运行此代码时，第二个元素获得相同的值。有什么问题？

<div *ngFor="let x of array; let i = index;">
    <input type="number" [(ngModel)]="x[i]">
</div>

从最近开始，当您没有在每个* ngFor上实现trackBy函数时，Angular styleguide-lint-extender“ Codelyzer”就会发出警告。我想知道为什么这完全是个问题。

• 在此博客中，实现trackBy的示例归结为trackByFn(index, item) { return index;} // or item.id。如果我从索引切换到item.id，这如何使我的应用程序更快？对于数组插入或删除，索引是最重要的事情。为什么[ngFor]指令应该比较对象标识值呢？
• 在ng_for_of.d.ts模块中，我可以找到_trackByFn。因此，我假设return index-trackBy仍然是默认配置？那么，为什么明确实施它被认为是一个好习惯呢？

现在个人而言，我的应用程序中确实有一个大集合（数组），它位于redux存储中。只能用空数组替换它，也可以添加新项目，例如：

return {...state, myArray: [...state.myArray, ...newItems]}），

但从未移动或删除。我item.id代替它跟踪是否有意义index？我真的应该return index;在每个带有* ngFor的组件中实现-function吗？