html - Angular + Typescript : Add to array, ng-repeat 添加空白行

Question

尝试将新对象添加到数组中并将其显示在 ng-repeat div 中。我添加了对象，在 Chrome 的开发工具中查看数组，可以看到其中的新对象，但 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>

有什么想法吗？任何帮助将不胜感激!

Answer 1

抱歉，帖子不好，我想通了(不是总是这样，只要你出洋相问一下，你就想通了)。我的数据从具有大写属性名称(即名称、描述)的 API 返回，并且我添加了一个名称为小写的对象(即名称、描述)，所以当然在新添加的行中没有任何内容可显示。因此，我将来自 API 的名称与 Typescript 类中的名称同步，现在一切正常。所以，当然，当我搜索答案时，我找不到它:没有人发布“嘿笨蛋!检查你特性上的外壳!”

所以我想我会保留这个，以防万一其他人遇到同样的问题并促使他们检查他们的外壳。