Angular 8中[(selection)]是什么？与[(ngModel)]有什么区别？

1. [(selection)] 和 [(ngModel)]的区别与双向绑定判定 #

• 二者底层依赖的Angular双向绑定语法规则完全一致，但适用场景和作用完全不同，不属于同一类功能
• 二者都属于Angular双向绑定的实现：Angular中[()]是双向绑定的语法糖，只要组件/指令同时定义了@Input() 属性名和@Output() 属性名Change的输出事件，就可以用[(属性名)]实现双向绑定
• 具体区别：
  • [(ngModel)]是Angular表单内置指令提供的双向绑定，专门用于表单类控件（input、select等）的输入值双向同步
  • [(selection)]是PrimeNG组件库的p-table组件自定义实现的双向绑定，专门用于同步表格的选中行数据

2. 关于p-table属性绑定方式的疑问 #

首先格式化你提供的代码：

<p-table #tt [value]="universitiesList" [(selection)]="selectedUniversity" [globalFilterFields]="['Name']">

2.1 value和selection是否为Angular保留字？ #

不是。二者都是p-table组件自定义的输入/输出属性，和Angular框架本身的保留关键字无关。

2.2 为什么二者的绑定符号不同？ #

• 用[]包裹的[value]是单向输入绑定：你只需要把组件中定义的universitiesList传给p-table作为渲染的数据源，表格本身不会修改这个数据源的内容，不需要反向同步，所以只用单向输入绑定即可。
• 用[()]包裹的[(selection)]是双向绑定：你有两个同步需求：
  1. 当组件中selectedUniversity的值被代码修改时，表格的选中状态要同步更新
  2. 当用户在页面上点击表格行切换选中状态时，组件中selectedUniversity的值要同步更新
     所以需要双向绑定来实现两端的自动同步，它等价于下面的完整写法：

  <p-table 
    [selection]="selectedUniversity" 
    (selectionChange)="selectedUniversity = $event"
    [value]="universitiesList" 
    [globalFilterFields]="['Name']">
  

内容的提问来源于stack exchange，提问作者Claudia Martins