角1と型スクリプトが変数にバインドしていません

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フックに割り当てることができ、これは、例えばバインディングからfalsy初期値を無視することを可能にする：

constructor() {} 

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