标签: angular2-template

我知道在angular2中我可以禁用具有该[disable]属性的按钮 ,例如:

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

但我可以做到这一点使用[ngClass]或[ngStyle]？像这样:

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>

谢谢.

有没有办法可以将字符串的长度限制为数字字符？例如:我必须将标题长度限制为20 {{ data.title }}.

是否有管道或过滤器来限制长度？

我正在使用Angular2 Final版本(2.1.0).当我想显示公司列表时,我收到了这个错误.

在file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

在file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

我无法将此代码从angualr1转换为angular2,任何帮助？

ng-repeat="todo in todos | orderBy: 'completed'"

这就是我按照Thierry Templier的回答所做的事情:

html模板:

*ngFor="#todo of todos | sort"

组件文件:

@Component({
    selector: 'my-app',
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]

})

管道文件:

import { Pipe } from "angular2/core";
import {Todo} from './todo';

@Pipe({
  name: "sort"
})
export class TodosSortPipe {
  transform(array: Array<Todo>, args: string): Array<Todo> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0; …

我们可以在angular2视图模板中使用枚举吗？

<div class="Dropdown" dropdownType="instrument"></div>

传递字符串作为输入:

enum DropdownType {
    instrument,
    account,
    currency
}

@Component({
    selector: '[.Dropdown]',
})
export class Dropdown {

    @Input() public set dropdownType(value: any) {

        console.log(value);
    };
}

但是如何传递枚举配置？我在模板中想要这样的东西:

<div class="Dropdown" dropdownType="DropdownType.instrument"></div>

什么是最佳做法？

编辑:创建一个例子:

import {bootstrap} from 'angular2/platform/browser';
import {Component, View, Input} from 'angular2/core';

export enum DropdownType {

    instrument = 0,
    account = 1,
    currency = 2
}

@Component({selector: '[.Dropdown]',})
@View({template: ''})
export class Dropdown {

    public dropdownTypes = DropdownType;

    @Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
    constructor() …

在我的Angular 2组件中,我有一个Observable数组

list$: Observable<any[]>;

在我的模板中我有

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

但是对于Observable数组,列表$ .length不起作用.

更新:

似乎(列出$ | async)?. length给出了我们的长度但是下面的代码仍然不起作用:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

任何人都可以指导我如何检查Observable数组的长度.

<div>
   <input #ipt type="text"/>
</div>

是否可以从组件类访问模板访问变量？

即,我可以在这里访问它,

class XComponent{
   somefunction(){
       //Can I access #ipt here?
   }
}

我们目前正在开发一个新项目,定期更新,我们的客户每天都会使用这些更新.该项目正在使用角度2开发,我们面临缓存问题,即我们的客户没有看到他们的机器上的最新变化.

主要是js文件的html/css文件似乎得到了正确的更新而没有给出太多麻烦.

参考https://angular.io/docs/ts/latest/guide/displaying-data.html和堆栈如何使用*ngIf检查角度2模板中的空对象仍然得到语法错误自我上下文未定义.如果我删除*ngIf条件然后我在teamMembers中获取值,如果我将一些值推入其中,以便我可以访问teamMembers中的值.

我的teamMember对象是[ ] array我试图检查条件数组是否为空大小.

尝试:

<div class="row" *ngIf="(teamMembers | json) != '{}'">

和

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

零件 :

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

任何帮助都会很棒.

我想将字符串值传递给angular2中的组件,但它不能与默认绑定一起使用.我在想类似的东西:

<component [inputField]="string"></component>

不幸的是,在赋值的右侧只允许表达式.有没有办法做到这一点？