相关疑难解决方法(0)

如何在ngFor angular 2中使用track

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

<!--- 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>
Run Code Online (Sandbox Code Playgroud)

对我有用的唯一方法是

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

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

<ion-card *ngFor="#post of …
Run Code Online (Sandbox Code Playgroud)

angularjs-track-by ngfor angular

46
推荐指数
3
解决办法
8万
查看次数

ngFor + ngModel:如何将值移至要迭代的数组?

我有一个元素数组,用户不仅可以编辑,还可以添加和删除完整的数组元素。除非我尝试在数组的开头添加一个值(例如使用unshift),否则此方法效果很好。

这是证明我的问题的测试:

import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';


@Component({
    template: `
        <form>
            <div *ngFor="let item of values; let index = index">
                <input [name]="'elem' + index" [(ngModel)]="item.value">
            </div>
        </form>`
})
class TestComponent {
    values: {value: string}[] = [{value: 'a'}, {value: 'b'}];
}

fdescribe('ngFor/Model', () => {
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;
    let element: HTMLDivElement;

    beforeEach(async () => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [TestComponent]
        });

        fixture …
Run Code Online (Sandbox Code Playgroud)

javascript angular angular-forms

14
推荐指数
2
解决办法
360
查看次数

FormArray 的 Angular .removeAt(i) 不会在 DOM 中更新 - Angular

我认为这是我的实现的问题,但从我提出的这个问题来看,我用于创建动态 FormArray 的代码似乎应该是功能性的。当我将它集成到我的项目中时,删除函数确实从 FormArray 中删除了元素,但它不会反映在界面中/不会从 DOM 中删除对象。可能是什么原因造成的?

import {
  Component,
  VERSION
} from '@angular/core';
import {
  FormGroup,
  FormControl,
  FormArray,
  Validators,
  FormBuilder
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  objectProps: any[];

  public dataObject = [{
      "label": "Name",
      "name": "name",
      "type": "text",
      "data": ""
    },
    {
      "label": "Contacts",
      "name": "contacts",
      "type": "inputarray",
      "array": []
    }
  ]
  form: FormGroup;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {

    const formGroup = {};
    for (let field of …
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular angular-reactive-forms

7
推荐指数
2
解决办法
1万
查看次数

Angular的*ngFor循环是如何实现的?

我想知道Angular的*ngFor指令实际上是如何工作的?我想知道使用该指令时发生的整个过程.

对于downvoters:我已经看过ng-for-of文件,虽然没有单一用法传递给*ngFor数组,例如join()我知道调用的方法.感谢您的支持:)以下是显示行为的plunker:https://plnkr.co/edit/IXVxWrSOhLBgvSal6PWL?p = preview

angular-directive angular

2
推荐指数
1
解决办法
2784
查看次数