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

此行为是由 disabled pre-assigned bindings in 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";
}

Angular 1 和 TypeScript 未绑定到变量

Angular 1 and TypeScript not binding to variable

angularjs

typescript

angularjs-1.5

angularjs-1.6