ngModel работает только как выход

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 Поле объявлено в суперкомпоненте.

UPDATE для @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(). Это должно выглядеть примерно так л:

русский Персоналии:

| Леонид | Борисевич |

| Vasiliy | Петров |

Исландия Лица:

| Джон |

| Thomas |

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> и она отлично работает.