标签: ngfor

我有一个简单的ngFor循环,它也跟踪电流index.我想将该index值存储在属性中,以便我可以打印它.但我无法弄清楚它是如何工作的.

我基本上有这个:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

我想存储#i属性中的值data-index.我尝试了几种方法,但没有一种方法有效.

我在这里有一个演示:http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp？p = preview

如何将index值存储在data-index属性中？

我在尝试使用Angular *ngFor和*ngIf同一个元素时遇到了问题.

当尝试遍历集合中的集合时*ngFor,集合被视为null并因此在尝试访问模板中的属性时失败.

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { …

我究竟做错了什么？

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

有人可以指导吗？我收到错误,无法弄清楚为什么？html中的货运变量看起来有问题

app/freightList.component.html:13:8错误尝试diff'[object Object]'

下面是代码

freight.service.ts
=======================

    getFreight (): Promise<Freight[]> {
        return this.http.get(this.freightUrl)
                  .toPromise()
                  .then(this.extractData)
                  .catch(this.handleError);
    }

  private extractData(res: Response) {
      let body = res.json();
      return body || { };
  }

freightList.component.ts
========================
    getFreight() {
        this.freightService
            .getFreight()
            .then(freight => this.freight = freight)
            .catch(error => this.error = error); // TODO: Display error message
    }

freightList.component.html
============================

       <tr *ngFor="let frght of freight">
       <td>{{frght.grp}} - {{frght.grpname}}</td>
       <td>{{frght.subgrp}} - {{frght.subgrpname}}</td>
       <td>{{frght.prodno}} - {{frght.prodname}}</td>
       <td>{{frght.percent}}</td>
       <td>{{frght.effective_date}}</td>
       <td><button (click)="deleteFreight(frght, $event)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove</button></td>
       <td><button …

根据我的理解,两者都在做同样的功能.但,

• ngFor会像收藏品一样工作吗？

• ngForOf会像仿制药一样工作吗？

我的理解是否正确？或者你能否分享更多差异(细节)ngFor和ngForOf？

尝试了我能猜出的每一种语法都无法使其有效!

<!--- THIS WORKS FINE --->
<ion-card *ngFor="#post of posts">
{{post|json}}
</ion-card>

<!--- BLANK PAGE --->
<ion-card *ngFor="#post of posts track by post.id">
{{post|json}}
</ion-card>

<!--- Exception : Cannot read property 'id' of undefined --->
<ion-card *ngFor="#post of posts;trackBy:post.id">
{{post|json}}
</ion-card>

<!--- Exception : Cannot read property 'undefined' of undefined --->
<ion-card *ngFor="#post of posts;trackBy:posts[index].id">
{{post|json}}
</ion-card>

<!--- Blank page no exception raised !  --->
<ion-card *ngFor="#post of posts;#index index;trackBy:posts[index].id">
{{post|json}}
</ion-card>

对我有用的唯一方法是

1. 在控制器类中创建方法

   识别(索引,帖子:帖子){return post.id}

和

<ion-card *ngFor="#post of …

我正在制作一个动态的表格.A Field有一个值列表.每个值都由一个字符串表示.

export class Field{
    name: string;
    values: string[] = [];
    fieldType: string;
    constructor(fieldType: string) {this.fieldType = fieldType;}
}

我的组件中有一个函数,它为字段添加了一个新值.

addValue(field){
    field.values.push("");
}

值和按钮在我的HTML中显示如下.

<div id="dropdown-values" *ngFor="let value of field.values; let j=index">
    <input type="text" class="form-control" [(ngModel)]="field.values[j]" [name]="'value' + j + '.' + i"/><br/>
</div>
<div class="text-center">
    <a href="javascript:void(0);" (click)="addValue(field)"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
</div>

只要在输入值中写入一些文本,输入就会失去焦点.如果我向字段添加许多值,并且我在一个值输入中写入一个字符,则输入将失去焦点,并且字符将写入每个输入.

在我的项目中我得到数据:图像src,学生姓名和学生ID.我绑定学生姓名和学生ID.

如何在角度2中绑定图像src？

我试图找出如何在ngFor循环中创建变量.

我有一个像这样的循环:

<td *ngFor="#prod of products">
  <a href="{{getBuild(branch,prod)?.url}}">
    {{getBuild(branch,prod)?.status}}
   </a>
</td>

您可以看到"getBuild"调用必须多次重复.(在我的实际例子中多次).我想在循环中一次在模板中创建这个变量并简单地重用它.有没有办法做到这一点？

我正在尝试使用ngFor我的select DropDownList.已加载应该在下拉列表中的选项.

你在这里看到的代码:

<div class="column small-12 large-2">
    <label class="sbw_light">Title:</label><br />
    <select [(ngModel)]="passenger.Title">
       <option *ngFor="#title of titleArray" [value]="title.Value">{{title.Text}}</option>
    </select>
</div>

根据此代码,它会生成一个看起来像这个图像的下拉列表.

问题是,我想将其中一个"先生或太太"设置为活跃的,基于passenger.Title"先生"或"太太"的字符串.

任何人都可以帮忙看看我在这里做错了什么？