Angular 9+ Angular Material Date Picker无法动态命名显示相同日期如何解决

你的问题核心是循环渲染时所有日期选择器的name属性重复：Angular 中使用ngModel绑定表单控件时，相同name属性的控件会被识别为同一个表单字段，所以无论你绑定的对象值是什么，所有同name的输入框都会同步显示最新的赋值。另外模板中[(ngModel)]的语法缺少引号，也可能导致绑定异常。

你只需要修改模板里的两个地方即可：

1. 给input控件的name属性绑定动态值，用循环下标i保证每个name唯一
2. 补全[(ngModel)]的双引号语法，避免部分编译器报错

修改后的模板代码如下：

<div *ngFor="let subtenant of currentSubtenants; let i = index;" class="subtenant-form-btn-group">
  <div class="deal-form-btn-group-radio" fxLayout="row" fxLayoutAlign="space-between center" >
    <div class="pharmacy-checkbox">
      <mat-checkbox
       color="primary"
       style="margin-left:10px;">
       <div class="deal-text-label">
         {{subtenant.subtenantName}}
      </div>
      </mat-checkbox>  
      </div>
  </div>
  <div >
    <mat-form-field appearance="fill" class="buyout-form-date-picker">
      <mat-label>Current Lease Expiration</mat-label>
        <input 
          [name]="'leaseExpPicker_' + i" 
          matInput   
          [min]="currentDate"                
          [matDatepicker]="picker" 
          [(ngModel)]="subtenant.currentLeaseExpiration"
          [required]="isExistingDeal">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>
</div>

注：循环内的模板引用变量#picker本身是作用域隔离的，每个循环项的#picker只会绑定当前项的日期选择器，不需要额外修改。

修改完成后重新编译运行，每个日期选择器就会单独绑定对应转租方的租约到期日期，不会再出现全部显示同一个日期的问题。

内容的提问来源于stack exchange，提问作者Akshay Amar