Угловая потеря привязки после обновления массива - PullRequest
Новая
       11

Угловая потеря привязки после обновления массива

0 голосов
/ 15 мая 2018

У меня есть ситуация, когда мне нужно иметь динамический массив, например форму бронирования, где люди добавляют рейсы в список, но это может быть 1 рейс или 10 рейсов. Я сделал глупый пример, где мне удалось воспроизвести проблему, я надеюсь, что это я, а не проблема с англуаром. во всяком случае, вот оно.

Я начинаю с пустого массива с кнопкой для добавления элементов, эти элементы связаны с * ngFor (код ниже), каждое из полей ниже находится в этом массиве, значения «Имя», которые я заполнил 1-5, просто печатать enter image description here

Затем я решаю удалить номер 3, что успешно

enter image description here

Затем я решаю добавить новый, здесь все идет не так. как вы можете видеть ниже, он успешно добавляет 5-й элемент снова, но тот, который должен иметь # 5, теперь пуст.

enter image description here

Затем я нажимаю «Создать массив», который просто выводит массив на консоль, и я вижу ниже, значения все еще там, но не привязаны к входу для этого 1 элемента.

enter image description here

Хорошо, теперь для кода:

Это мой файл шаблона HTML: 

<form name="form" #f="ngForm">
Name: <input class="input" type="text" name="Name" [(ngModel)]="model.Name" 
#Name="ngModel" />
Description: <input class="input" type="text" name="Description" 
[(ngModel)]="model.Description" #Description="ngModel" />
<br>

<button (click)="addThought()">New Thought</button>

<div class="Thought" *ngFor="let Thought of myObject.Thoughts;let i=index">
Thought Name:<input name="Name-{{i}}" [(ngModel)]=Thought.Name 
#Thought.Name="ngModel" type="Text" /><br>
Thought Description:<input name="Description-{{i}}" 
[(ngModel)]=Thought.Description #Thought.Description="ngModel" type="Text" 
/> 
<br>
<br>


<button (click)="removeThought(Thought)">Remove Thought</button>
</div>
<button (click)="CreateThought()">Create Arrays</button>
</form>

и это мой файл TS компонента: 

export class CreateThoughtComponent implements OnInit {

  model: any = {};
  myObject: customObject = new customObject;

  constructor(private guid: Guid, private staticData: StaticDataService) {

  }

  ngOnInit() {

  }

  CreateThought() {
      console.log(this.myObject);
  }

  addThought() {
    let thought: Thought = new Thought;
    this.myObject.Thoughts.push(thought);
  }

  removeThought(t: Thought) {
    this.myObject.Thoughts = this.myObject.Thoughts.filter(item => item !== 
t);
  }
}

А вот и объявление массива внутри объекта 

export class customObject {
    Name: string;
    Description: string;
    Thoughts: Thought[];
    constructor() {
        this.Thoughts = new Array<Thought>();
    }
}
export class Thought {
    Name: string;
    Description: string;
}

Любая помощь или предложения будут с благодарностью.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Я решил это, удалив name = "Name - {{i}}" из входных данных и добавив вместо него [ngModelOptions] = "{standalone: ​​true}". в то время как это казалось проблемой с динамическим способом, которым я назначал имя для ввода, используя «index»

Мне удалось решить эту проблему путем случайного создания подсказки для каждого имени, но это породило массу других проблем.

При этом я также протестировал решение DiabolicWord, описанное выше, и оно работает, поскольку его так просто обозначить как ответ.

0 голосов
/ 15 мая 2018

Это сложная вещь в механизме обнаружения изменений Angular. Вы можете легко решить свою проблему, создав клон вашего объекта. например, 

addThought() {
   let thought: Thought = new Thought;
   this.myObject.Thoughts.push(thought);

   // clone the object in order to force Angular to apply changes
   this.myObject = JSON.parse(JSON.stringify(this.myObject));
}
...