如何在一组ngModel可绑定属性上使用*ngFor

21 浏览
0 Comments

如何在一组ngModel可绑定属性上使用*ngFor

我试图使用*ngFor来绑定一组相同的输入，除了输入要绑定到的属性之外。

prop.key无法工作，但这是一个单独的问题。

下面是被绑定的组件：

import { Component } from '@angular/core';
import { EntitySrcService } from '../entity-src.service';
@Component({
  selector: 'app-entity-table',
  templateUrl: './entity-table.component.html',
  styleUrls: ['./entity-table.component.less']
})
export class EntityTableComponent {
  constructor(
    private entitySrc: EntitySrcService
    ) {}
  public get ID(): string {
    return this.entitySrc.id;
  }
  public set ID(value: String) {
    this.entitySrc.id = value;
  }
  public get Name(): string {
    return this.entitySrc.name;
  }
  public set Name(value: String) {
    this.entitySrc.name = value;
  }
  public get Nickname(): string {
    return this.entitySrc.altName;
  }
  public set Nickname(value: String) {
    this.entitySrc.altName = value;
  }
}

大部分情况下，这似乎按预期工作，但是似乎[(ngModel)]绑定只读取属性而不写入。所以例如，如果我更新绑定测试输入，ngFor循环中的Name字段会更新匹配，但是更新ngFor循环中的字段不会更新测试中的字段。

在组件中，我使用get/set属性来代理实际存储位置，但我理解get/set属性应该与普通属性相同（使用普通属性具有相同的单向绑定行为）。

那么，如何正确迭代我想要绑定的一组属性？

0

3 答案

0 Comments

问题的出现原因是在Angular 6.1中，虽然引入了KeyValuePipe，可以用它来迭代对象属性，但是在这个问题中，用户并不需要键值对。用户特别想要使用ngFor来迭代一组可绑定到ngModel的属性。

解决方法如下：

1. 使用自定义指令来实现ngFor迭代属性的功能。用户可以创建一个指令，该指令接收一个对象作为输入，然后迭代该对象的属性并生成相关的HTML元素。用户可以在这些元素中使用ngModel指令来绑定数据。

2. 在组件中使用Object.keys()方法获取对象的属性数组，然后使用ngFor迭代该数组。用户可以在ngFor的循环中使用ngModel指令来绑定数据。

3. 使用ng-container元素来包裹ngFor循环，并在循环中使用ngModel指令来绑定数据。这样可以避免生成多余的HTML元素。

下面是一个示例代码，演示了如何使用ngFor迭代可绑定到ngModel的属性：


  




getObjectProperties() {
  return Object.keys(this.object);
}

通过上述解决方法，用户可以使用ngFor来迭代一组可绑定到ngModel的属性。这样用户就可以方便地操作这些属性，并实时更新数据。

0
0 Comments

问题出现的原因是，ngFor指令在循环迭代时，通过ngModel绑定的属性并不是它们的引用，而是它们的值。因此，双向绑定会修改数组项而不是原始属性。为了使其正常工作，需要通过索引引用数组项，并通过索引跟踪数组。具体解决方法如下：

可以使用一个属性名数组，并通过this[prop]来引用每个属性，从而实现组件属性的双向绑定：


  
  ...

可以查看此stackblitz链接进行演示：[https://stackblitz.com/edit/angular-ze2gqb?file=src%2Fapp%2Fapp.component.html](https://stackblitz.com/edit/angular-ze2gqb?file=src%2Fapp%2Fapp.component.html)

0
0 Comments

问题出现的原因是*ngFor指令默认只对值类型进行迭代，而不会绑定到原始变量上。如果仍然需要绑定，应该考虑将它们转换为引用类型。例如，可以将它们放入对象中，如person或options，并使用KeyValuePipe迭代对象属性。

解决方法是使用KeyValuePipe迭代对象属性。首先，将值类型转换为引用类型，将它们放入一个对象中，例如options对象。然后在模板中使用*ngFor指令和keyvalue管道迭代options对象的属性。

以下是解决方法的代码示例：

options: {[key: number]: string} = {ID: '1', Name: 'bar', Nickname: 'foo'};

需要注意的是，在这个例子中，item是不可绑定到[(ngModel)]的。

0