带有文本字段的多个复选框答案

【问题标题】：multiple checkboxes with textfield带有文本字段的多个复选框
【发布时间】：2022-01-09 07:32:04
【问题描述】：

我想在下面屏幕显示的复选框中添加文本字段，我们如何在没有标签的复选框旁边显示一个文本字段？在下面的屏幕截图中相同，因为复选框来自循环，如果选中没有标签的复选框，我只想显示文本字段

感谢您的任何想法。

#示例

#html代码

 <div class="deal-disposition-row"></div>     
        <div class="pharmacy-checkbox">
        <mat-checkbox
         color="primary"
         style="margin-left:10px;"
         name="isAnyContingencies"
         [(ngModel)]="dealDispositionFormFields.isAnyContingencies"
          >
         <div class="deal-text-label">
          Any Contingencies?
        </div>
        </mat-checkbox>
        </div>
        <span>
          <ul>
            <li *ngFor="let contigency of contingencies">
              <mat-checkbox 
              class="checkbox-margin"
              color="primary"
              (change)="changeCurrentContingencies($event,contigency)"
              >
              <mat-form-field appearance="fill"  *ngIf="!contigency.text; else text" matInput>
                <mat-label>Other Contingencies</mat-label>
                <input 
                  name = "buyerProposedPlans"
                  matInput
                  [(ngModel)]="dealDispositionFormFields.buyerProposedPlans"
                  >
                  <span matPrefix *ngIf="dealDispositionFormFields.salePrice">$</span>
              </mat-form-field>
              <ng-template #text>
              {{contigency.text}}
              </ng-template>
              </mat-checkbox>
            </li>
          </ul>
        </span>
    </div>

#ts 代码

export class DealIdleDispositionComponent implements OnInit {
  contingencies = [
    {id: 1, text: 'Financing Contigency'},
    {id: 2, text: 'Site Approval Contigency'},
    {id: 3, text: 'Permit Approval Contingency'},
    {id: 4, text: 'Tenant Approval Contingency'},
    {id: 5, text: ''},
  ]

   ......

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

使用*ngIf 和ng-template 在文本为空时有条件地显示输入文本。将以下代码放入您的 li 元素中。

<input *ngIf="!contigency.text; else text" matInput>
    <ng-template #text>
    {{contigency.text}}
    </ng-template>

【讨论】：