我想在下面的螢屏顯示中的復選框旁邊添加文本欄位，我們如何在沒有標簽的復選框旁邊顯示文本欄位？與下面的螢屏截圖相同，因為復選框來自回圈，如果選中沒有標簽的復選框，我只想顯示文本欄位
感謝您的任何想法。
＃樣本
#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: ''},
]
......
uj5u.com熱心網友回復：
使用*ngIfwithng-template在文本為空時有條件地顯示輸入文本。將以下代碼放在 li 元素中。
<input *ngIf="!contigency.text; else text" matInput>
<ng-template #text>
{{contigency.text}}
</ng-template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/372376.html