角+打字稿:添加到数组，ng-repeat添加空行

Trying to add a new object to an array and have it show up in an ng-repeat div. I add the object, look at the array in Chrome's dev tools and can see the new object in there, but the ng-repeat section just has a blank row. I've search throughout *, implemented many solutions and still have this problem.

尝试向数组中添加一个新对象，并将其显示在一个ng-repeat div中，我添加了对象，查看Chrome的dev工具中的数组，并可以看到其中的新对象，但是ng-repeat部分只有一个空白行。我搜索了整个*，实现了许多解决方案，仍然有这个问题。

HTML:

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

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);
        }
}

When I click a button, AddSubItem runs, the item gets created and after the push, I can hover over subItems and see the array has two objects, the one I loaded with and the one I pushed, but the HTML that's generated gives me this:

当我点击一个按钮，AddSubItem就会运行，这个项目就会被创建，我可以将鼠标悬停在子项目上看到这个数组有两个对象，一个是我加载的，另一个是我按下的，但是生成的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>

Any ideas? Any help would be greatly appreciated!

什么好主意吗?非常感谢您的帮助!

1 个解决方案

#1

Sorry, bad post, I figured it out (isn't it always like that, as soon as you make a fool of yourself and ask, you figure it out). My data was coming back from the API with capitalized property names (i.e. Name, Description) and I was adding an object where the names were lowercase (i.e. name, description) so of course there was nothing to show in the newly added row. So I synced up the names coming from my API with the names in the Typescript classes and everything is working now. So of course when I searched for the answer, I couldn't find it: no one posted "Hey dummy! Check the casing on your properties!"

不好意思，坏帖子，我想出来了(不是一直都是这样的吗?只要你愚弄自己，问出来，你就会明白的)。我的数据从API中返回，使用了大写的属性名(比如名称、描述)，我添加了一个对象，其中的名称是小写的(即名称、描述)，所以在新添加的行中没有显示任何内容。因此，我将来自API的名称与打字稿类中的名称进行了同步，现在一切都在工作。当然，当我搜索答案时，我找不到:没有人贴出“嘿，傻瓜!”检查你财产上的外壳!

So I think I will leave this up just in case someone else runs across the same problem and it sparks them to check their casing.

所以我想我还是把它放在一边，以防别人遇到同样的问题，这就会激发他们去检查他们的情况。