Angular + Typcript: добавить в массив, ng-repeat добавляет пустую строку

71
8

Попытка добавить новый объект в массив и показать его в div ng-repeat. Я добавляю объект, смотрю на массив в инструментах Chrome dev и вижу новый объект там, но в разделе ng-repeat есть только пустая строка. Я выполнял поиск по всему StackOverflow, реализовал множество решений и все еще имею эту проблему.

HTML:

   <div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link">{{subItem.Name}}</button>
</div>
<div class="col-md-6">
{{subItem.Description}}
</div>
</div>
</div>
</div>
</div>

ItemCtrl.ts

module MainItemApp {
'use strict'

export class MainItemEntryCtrl implements IMainItemCtrl {
static $inject = ['$scope', '$routeParams', 'ItemSvc'];
public mainItem: MainItem; //this has an array on it named SubItems

public sub_item_name: string;
public sub_item_description: string;
public sub_item_date: Date;
public sub_item_start_date: Date;
public sub_item_end_date: Date;
public sub_item_descriptive_location: string;
public sub_item_short_location: string;

constructor($scope, $routeParams: IItemEntryRouteParams, itemSvc: ItemSvc) {
this.id= this.getId($routeParams.id);

if (this.id!= undefined) {
itemSvc.getMainItem(this.id).then(
(data) => this.mainItem = data);
}
}

addSubItem() {
var subItem = {
id: '',
name: this.sub_item_name,
itemDate: this.sub_item_date,
startDate: this.sub_item_start_date,
endDate: this.sub_item_end_date,
description: this.sub_item_description,
descriptiveLocation: this.sub_item_descriptive_location,
shortLocation: this.sub_item_short_location,
geoLat: '',
geoLong: '',
groupItems: []
};

this.mainItem.SubItems.push(subItem);
}
}

Когда я нажимаю кнопку, запускается AddSubItem, элемент создается и после нажатия, я могу навести курсор на subItems и видеть, что в массиве есть два объекта: тот, который я загрузил, и тот, который я нажал, но созданный HTML дает мне это:

   <div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link">Some Item</button>
</div>
<div class="col-md-6">
Some Description
</div>
</div>
</div>
</div>
</div>
<div ng-repeat="subItem in ec.mainItem.SubItems">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 h4">
<button class="btn-link"></button>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>

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

спросил(а) 2015-08-05T21:52:00+03:00 5 лет, 2 месяца назад
1
Решение
70

Извините, плохой пост, я понял это (не всегда так, как только вы обманываете себя и спрашиваете, вы это понимаете). Мои данные возвращались из API с заглавными именами свойств (например, Name, Description), и я добавлял объект, где имена были строчными (например, имя, описание), поэтому, конечно, в новой добавленной строке не было ничего. Поэтому я синхронизировал имена, исходящие из моего API, с именами в классах TypScript, и все работает сейчас. Поэтому, конечно, когда я искал ответ, я не мог его найти: никто не отправил "Эй, манекен! Проверьте корпус на своих свойствах!"

Поэтому я думаю, что оставлю это на всякий случай, если кто-то другой столкнется с одной и той же проблемой, и он искроет их, чтобы проверить их корпус.

ответил(а) 2015-08-05T22:17:00+03:00 5 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема