带输入的角度复选框

Question

有没有办法实现下面的 ff 设计，我现在必须在最后一个复选框旁边添加一个文本字段，最后一个复选框与其他复选框的距离不同。有人或有人知道如何使它成为可能吗？ CSS 是解决方案吗？

我正在尝试实施的设计

这是基于下面代码的当前输出，您可以在此处看到最后一个复选框与其余复选框太远了

current-output

HTML 代码：

<ul>
  <li *ngFor="let contigency of contingencies;let i = index;">
    <mat-checkbox
      class="checkbox-margin"
      name="contigency"
      color="primary"
      [checked]="currentSelectedContingency(contigency)"
      (change)="changeCurrentContingencies($event,contigency)"
      #checkbox
    >
      <mat-form-field
        appearance="fill"
        *ngIf="contigency.text === 'Other Contingencies'; else text"
      >
        <input
          [disabled]="!checkbox.checked"
          name="otherContingency"
          matInput
          [(ngModel)]="dealDispositionFormFields.otherContingency"
        />
        <span matPrefix *ngIf="dealDispositionFormFields.otherContingency"
          >$</span
        >
      </mat-form-field>
      <ng-template #text>
        <div class="deal-text-label">{{contigency.text}}</div>
      </ng-template>
    </mat-checkbox>
  </li>
</ul>

#ts sn -p 代码：-

contingencies = [
  {id: 1, text: 'Financing Contigency'},
  {id: 2, text: 'Site Plan Approval Contigency'},
  {id: 3, text: 'Permit Approval Contingency'},
  {id: 4, text: 'Tenant Approval Contingency'},
  {id: 5, text: 'Other Contingencies'},
]

changeCurrentContingencies(e:any,rowData:any){    
  if(e.checked){
    this.selectedContingencies.push(rowData);
  }else {
    this.removeSelectedContingency(rowData);
  }
}

Answer 1

这样试试

<ul>
<li *ngFor="let contigency of contingencies;let i = index;">
    <div [class.d-flex]="contigency.text === 'Other Contingencies'">
        <mat-checkbox class="checkbox-margin" name="contigency" color="primary"
            [checked]="currentSelectedContingency(contigency)"
            (change)="changeCurrentContingencies($event,contigency)" #checkbox>
            <div class="deal-text-label" *ngIf="contigency.text !== 'Other Contingencies'">
                {{contigency.text}}
            </div>
        </mat-checkbox>

        <mat-form-field appearance="fill" *ngIf="contigency.text === 'Other Contingencies'">
            <mat-label>{{contigency.text}}</mat-label>
            <input [disabled]="!checkbox.checked" name="otherContingency" matInput
                [(ngModel)]="dealDispositionFormFields.otherContingency" />
            <span matPrefix *ngIf="dealDispositionFormFields.otherContingency">$</span>
        </mat-form-field>
    </div>
</li>
</ul>