Angular 1和TypeScript与变量不结合

Question

我有以下代码，我希望在其中显示属性variable的内容。我读了几篇文章，试图找出我在做错了什么，但找不到错误。这是代码：

namespace testWeb.about {
    class AboutComponent implements ng.IComponentOptions {
        templateUrl = "scripts/components/about/about.html";
        controller = AboutController;
        bindings: any;
        constructor() {
            this.bindings = {
                awesomeThings : '<',
                property : '<'
            };
        }
    }
    interface IAboutController {
        awesomeThings: Array<string>;
        property: string;
    }
    export class AboutController implements IAboutController, ng.IComponentController {
        awesomeThings: Array<string>;
        property: string;
        constructor() {
            this.awesomeThings = [
                "one",
                "two",
                "three"
            ];
            this.property = "123";
        }
    }
    angular.module("test_web")
        .component("about", new AboutComponent())
        .config(($stateProvider) => {
            "ngInject";
            $stateProvider
                .state("about", {
                    url: "/about",
                    template: `<about></about>`
                });
        });
}

<span ng-repeat="dd in $ctrl.awesomeThings">{{dd}}</span>和<span class="as">{{$ctrl.property}}</span>是否显示。

<span ng-repeat="dd in $ctrl.awesomeThings">{{dd}}</span>
<span class="as">{{$ctrl.property}}</span>
<p>123</p>

Answer 1

这种行为是由在Angular 1.6中禁用的预分配绑定引起的。

在1.5中，this.property = "123"即使提供了初始绑定值。

在1.6中，绑定是在构造器调用之后分配的。如果未提供绑定的值，则将property分配给undefined。

以防止这种情况并提供所需的行为绑定应标记为可选：

this.bindings = {
    awesomeThings : '<?',
    property : '<?'
};

或者，可以在$onInit钩中分配初始值，这允许忽略绑定中的虚假初始值：

constructor() {}
$onInit() {
    this.awesomeThings = this.awesomeThings || [
        "one",
        "two",
        "three"
    ];
    this.property = this.property || "123";
}