각도 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에서 바인딩은 생성자 호출 후에 할당됩니다. Y 인딩 값이 제공되지 않으면 property이 undefined에 지정됩니다.

이를 방지하고 원하는 동작 바인딩을 제공하기 위해이 선택적으로 표시되어야한다

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

는 달리, 초기 값이 $onInit 후크에 할당 될 수 있고, 이는 예를 들어 바인딩에서 falsy 초기 값을 무시할 수있게 :

constructor() {} 

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