Question

考虑一个班级：

 export class MyClass {
      a: string;
      b: string;
      getProperties(): string[] {
        return [this.a, this.b];
      }
    }

有一个Angular2组件，其字段为MyClass。在它的模板中，有以下几行：

<span *ngFor="let property of newElement.getProperties(); let i=index">
        <input [(ngModel)]="newElement.getProperties()[i]" class="new-rest-type" placeholder="property">
      </span>

当组件呈现时，它会正确显示每个属性的内容，a和b，但如果我在<input>内输入内容，则会更改页面上显示的值，但不会更改newElement内的值。有什么想法，为什么它的行为？

，MyClass字段在超级组件中声明。

@Aravind的

更新：比方说，我想制作两个组件，它们的行为相似，并在表格中显示人员名称，其中一行对应一个人，每列对应每个名称。在不同的国家，人们可以拥有不同数量的名称，所以它是这样的：

export abstract class Person {
  public abstract getNames(): string[];
}

export class RussianPerson extends Person {
  firstName: string;
  lastName: string;

  public getNames(): string[] {
    return [this.firstName, this.lastName];
  }
}

export class IcelandPerson extends Person {
  firstName: string;

  public getNames(): string[] {
    return [this.firstName];
  }
}

现在，我希望有一些AbstractPersonNamesComponent，它有两个子类：RussianPersonNamesComponent和IcelandPersonNamesComponent。它们将具有相同的模板，其内部将*ngFor，我们将在其中显示每个人的名称，使用第二个*ngFor浏览getNames()的结果。看起来应该像这样：

俄罗斯人：

|狮子座| Borisevich |

| Vasiliy |彼得罗夫|

冰岛人：

| John |

|托马斯|

Answer 1

找到解决方案。看起来如果您使用*ngFor表示基本类型数组（number，boolean，string），它会通过值而不是引用将变量传递给自身，所以当你使用*ngFor在ngModel内更改它 - 没有任何反应。因此，解决方案是将值包装在某个类中，并将该类型的元素放在数组中而不是基本类型中。我这样做了：

export class Valuable<T> {
  constructor(str: T) {
    this._value = str;
  }

  private _value: T;

  get value(): T {
      return this._value;
  }

  set value(value: T) {
    this._value = value;
  }
}

然后只需制作firstName: Valuable<string>即可。

ngModel仅用作输出

1 个答案: