Angular TypeScript中日期选择器赋值与复选框数据获取方案

1. 扩展数据结构，处理日期默认值 #

你当前的currentSubtenants缺少选中状态标记，且日期字符串需要适配Angular日期选择器的Date类型要求，先修改列表获取逻辑：

getListOfCurrentSubtenants() {
  this.partnerRoleIsInProgress = true;
  this._dealService.getCurrentSubtenants(this.transactionData.propertyId)
    .pipe(
      finalize(() => this.partnerRoleIsInProgress = false),
    ).subscribe({
      next: (res) => {
        if (res.isSuccess) {
          res.data.forEach(element => {
            // 新增选中状态字段，默认未选中
            element.isSelected = false;
            if(element.currentLeaseExpiration) {
              // 先转成Date类型适配mat-datepicker绑定要求
              const dateStr = AppUtils.convertDateStringToYYYYMMDD(element.currentLeaseExpiration);
              element.currentLeaseExpiration = new Date(dateStr);
            }
          });
          this.currentSubtenants = res.data;
        }
      },
      error: err => this._notificationService.showError(err),
      complete: noop
    });
}

2. 修正模板绑定逻辑 #

原模板存在两个核心问题：所有日期选择器绑定了同一个全局变量、复选框没有绑定选中状态，修改后代码如下：

<!-- 循环新增索引变量，用于生成唯一name -->
<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;"
       <!-- 绑定当前项的选中状态 -->
       [(ngModel)]="subtenant.isSelected">
       <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，避免循环内ngModel冲突 -->
          name = "currentLeaseExpiration_{{i}}" 
          matInput   
          [min]="currentDate"                
          [matDatepicker]="currentLeaseExpiration" 
          <!-- 绑定当前项自己的日期字段，实现默认值赋值和修改同步 -->
          [(ngModel)]="subtenant.currentLeaseExpiration"
          [required]="isExistingDeal">
        <mat-datepicker-toggle matSuffix [for]="currentLeaseExpiration"></mat-datepicker-toggle>
        <mat-datepicker #currentLeaseExpiration></mat-datepicker>
    </mat-form-field>
  </div>
</div>

3. 实现选中项获取方法 #

需要获取选中数据时调用以下方法，直接返回符合要求的对象数组：

getSelectedSubtenants(): {subtenantName: string, currentLeaseExpiration: Date | string}[] {
  return this.currentSubtenants
    .filter(item => item.isSelected)
    .map(item => {
      // 如果需要返回字符串格式日期，可在此处转回对应格式
      // const dateStr = AppUtils.convertDateToYYYYMMDD(item.currentLeaseExpiration);
      return {
        subtenantName: item.subtenantName,
        currentLeaseExpiration: item.currentLeaseExpiration
      }
    })
}

如果提交时需要字符串格式的日期，放开注释里的转换逻辑即可。

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