标签: angular2-template

我有一个组件,它作为对象的输入数组,应该过滤并显示在模板中.

  @Input() inputAddons: Array<InputAddon>;
  addOns: Observable<InputAddon>;
  lblLeftAddons: Observable<InputAddon>;

班上的定义如上.

ngOnInit(): void {
this.addOns = Observable.from(this.inputAddons);
this.lblLeftAddons = this.addOns.filter(function (x){
  return x.pos == 'left' && x.type == 'label'}
);

this.lblLeftAddons.subscribe(x => console.log(x));
}

这是我过滤数组的代码

在模板中我有这个代码

*ngFor="#addon of lblLeftAddons | async"

但它不起作用.我得到例外

Cannot find a differ supporting object '[object Object]' in [lblLeftAddons | async in InputText@14:10]

我有什么想法吗？

我想使用页面上的select元素创建导航.在锚标记上使用RouterLink指令很简单,但选择下拉列表是否相同？或者,当我的选择发生变化时,我是否需要在我的组件上创建自己的导航方法？

<a [routerLink]="[location]">Location</a>

<select (change)="navigate($event.target.value)">
    <option>--Select Option--</option>
    <option [value]="[location]">Location</option>
</select>

我正在寻找这样的东西:

<select>
    <option>--Select Option--</option>
    <option [routerLink]="[location]">Location</option>
</select>

展望设置使用的一个网站谷歌的推荐的多区域和多语言网站的做法,利用子目录与gTLD的(例如特别的模型.www.stackoverflow.com/en/questions/ask,www.stackoverflow.com/fr/questions/ask等).

根据顶级子目录,我想设置默认语言并获取相应的JSON数据.进一步解释,当用户直接导航到www.mywebsite.com/en/home时,默认语言将被设置为en,我的内容服务将获取该en.json文件.

在上面的示例中,我的路由将配置如下:

export const routes: RouterConfig = [
  { path: ':country',          component: Home },
  { path: ':country/home',     component: Home },
  { path: ':country/about',    component: About },
  { path: ':country/contact',  component: Contact }
];

我试图找出如何抓住:country路线参数(如果网址是www.mywebsite.com/en/about/我试图让:country路由参数值en)的时候Home,About或Contact组件.这是我尝试过的几件事:

export class Home implements OnInit {
    constructor(
        private route: ActivatedRoute
    ) {}

    private sub: any;

    ngOnInit(){
       this.sub = this.route.params.subscribe(params => {
         let country …

我刚刚更新到RC6并遇到以下错误:

zone.min.js:1未处理的Promise拒绝:模板解析错误:'sidebar'不是已知元素:1.如果'sidebar'是Angular组件,则验证它是否是此模块的一部分.2.如果"侧边栏"是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的"@NgModule.schema"以禁止显示此消息.("

sidebar不是一个组成部分.只是我在我的一个模板中使用的html标签.它们看起来像这样:

...
<sidebar class="main-nav">
    ...
</sidebar>
...

我尝试用CUSTOM_ELEMENTS_SCHEMA这样更新我的NgModule AppModule :

@NgModule({
    declarations: [...],
    providers: [...],
    imports: [BrowserModule, routing, HttpModule, FormsModule, TranslateModule.forRoot()],
    bootstrap: [AppComponent],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

但这似乎没有做任何事情.

有没有人有想法或暗示？

我有两个字符串数组,我想迭代其中一个取决于条件.如何避免代码重复？现在*ngIf:

<tr *ngIf="!condition">
    <td *ngFor="let field of firstArray">{{field}}</td>
</tr>
<tr *ngIf="condition">
    <td *ngFor="let field of secondArray">{{field}}</td>
</tr>

有没有更好的办法？

对不起基本问题,我试图用基本的例子来理解angular2流.

import { Component } from '@angular/core';

@Component({
    selector:'my-app',
    template:'Test {{ getVal() }}'
})

export class AppComponent{ 
    getVal():void{
        console.log("demo text")
    }
}

运行此示例后,"演示文本"在控制台中可见4次,为什么会这样？谢谢.

我有这个简单的代码:

<form #form="ngForm" (ngSubmit)="submit(form)">
   <fieldset ngModelGroup="cliente">
      // inputs with ngModel
   </fieldset>
   <fieldset ngModelGroup="enderecos">
      // inputs with ngModel
   </fieldset>
   <fieldset ngModelGroup="contatos">
      // inputs with ngModel
   </fieldset>
</form>

// My submit method
submit(form: NgForm) {
  if(form.valid) {
    // save
    // reset method
    form.reset();
  }
}

当我调用方法form.reset()时,Angular默认重置所有字段.

我的问题是:是否有机会仅重置像"contatos"或"enderecos"这样的特定ngModelGroup而不是所有表单输入？

谢谢你的建议.

问题

在Angular 2.2的版本之后.*,我注意到我的应用程序的某些组件存在问题,即在更新数据后,视图中的数据是错误的(它显示的列表具有正确的大小,但仅包含第一项的数据).

示范

我用一个简单的问题示例创建了这个Plunker.

这种使用会导致问题:

<list-component [data]="list">
  <template pTemplate let-item>
      <b *ngIf="item % 2 == 0">{{item}}</b>
      <del *ngIf="item % 2 != 0">{{item}}</del>
  </template>
</list-component>

发生问题的说明:

1. 在Plunker中打开示例;
2. 正面第二个块(模板带*ngIf:)
3. 单击"刷新"按钮;
4. 然后再看第二个块(Template with *ngIf:);

题

什么可能导致这个问题,以及如何解决它？

我正在尝试做一些听起来很简单的事情,但我找不到任何满足我需求的例子.我有一个简单的组件,呈现ajax微调器,但我想允许使用者传入一个类或多个类(由空格分隔)作为组件的输入参数,并让组件视图模板将类添加到img标记中模板.这是我的组件:

import { Component, OnInit, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'loading',
    templateUrl: 'loading.html',
    inputs: ['imgClass']

})

export class LoadingComponent {
    @Input() imgClass: string;
}

这是视图模板:

<img [ngClass]="{ imgClass : true}" src="./Content/img/loading_spinner.gif" />

这是我想要使用它的方式:

 <div class="row" *ngIf="isLoading">
        <div class="col-xs-4"></div>
        <div class="col-xs-4 no-pad"><loading [imgClass]="center-block"></loading></div>
        <div class="col-xs-4"></div>
    </div>

所以我想通过加载组件将中心块添加到img标签,但它似乎没有工作.

当应用加载标记时,这是:

它没有获得imgClass变量值,而是将文字'imgClass'添加为类.

我想在Id调用函数时显示一个特定的按钮（或将其附加到其父元素），但是我不知道如何访问组件类中的元素。

<div *ngFor="let item of items; let i = index;">

    <button [attr.id]="'undoBtn'+i" *ngIf="showBtn" class="editBtn" md-raised-button color="primary"> 
        <md-icon>undo</md-icon>Undo
    </button>

    <button (click)=showUndoBtn(i) md-raised-button color="primary">Test</button>
</div>

组件类：

private showBtn = false;

showUndoBtn(btnId: number) {
    // show btn with id btnId in DOM
}

撤消按钮必须在开始时是隐藏的，并且单击“测试”按钮时，它应该出现。我尝试使用*ngIf和，@ViewChild() 但不能用于具有不同ID的多个按钮。