Angular中使用ng-template与ngTemplateOutlet时的值绑定问题

原因 #

ng-template在Angular中会创建独立的作用域，如果模板内的PrimeNG下拉框绑定的是模板上下文里的局部变量（而非组件类的全局共享变量），修改模板内下拉框的值时，只会更新该局部变量，无法同步到组件的全局属性，自然其他绑定全局变量的下拉框不会跟着变化。

而模板外的下拉框直接绑定组件的全局变量，修改时会直接更新这个全局属性，所以所有绑定它的下拉框都会同步更新。

解决方法 #

1. 统一绑定全局变量
   确保所有下拉框（包括ng-template内的）都绑定到组件类中同一个全局属性。比如组件类中定义：

   selectedValue: any; // 全局共享的选中值变量
   

   然后所有p-dropdown的[(ngModel)]都绑定这个变量：

   <!-- 模板外的下拉框 -->
   <p-dropdown [(ngModel)]="selectedValue" [options]="options"></p-dropdown>
   
   <!-- ng-template内的下拉框 -->
   <ng-template>
     <p-dropdown [(ngModel)]="selectedValue" [options]="options"></p-dropdown>
   </ng-template>
   

2. 避免模板内的局部变量隔离
   如果是在*ngFor等结构指令中使用ng-template，不要在模板内创建独立的绑定变量（比如let-selected="selected"这类局部上下文变量），直接引用组件的全局共享变量，确保数据流向是统一的。

3. 确认模板作用域的属性访问
   如果模板需要通过上下文传递数据，确保传递的是组件全局变量的引用，而非副本。比如通过[ngTemplateOutletContext]传递时，依然直接绑定组件的全局变量：

   <ng-container *ngTemplateOutlet="myTemplate; context: { selected: selectedValue }"></ng-container>
   <ng-template #myTemplate let-selected="selected">
     <p-dropdown [(ngModel)]="selectedValue" [options]="options"></p-dropdown>
   </ng-template>
   

内容的提问来源于stack exchange，提问作者manjiro sano