Question

我正在尝试使用ngSwitch根据格式类型id显示文本或文本区域。对于每个问题，我想显示文本区域或输入文本。但是对于每个FormatType Id，它都显示textarea，尽管FormatType与值3121不匹配。请任何人都可以帮忙。

<mat-card>
  <div class="row" *ngFor="let question of Questions">
    <div class="col-6">
      <p>{{question.Question}}
      </p>
    </div>
    <div class="col-6" [ngSwitch]="question.FormatType.Id">          
      <mat-form-field *ngSwitchCase="3121">            
        <textarea matInput [(ngModel)]="question.Answer" name="questionField" maxlength="1000" 
        [required]="RequiredFields" [disabled]="true"></textarea>

      </mat-form-field>

      <mat-form-field *ngSwitchDefault>
        <input type="text" matInput [required]="RequiredFields" autocomplete="off" 
        [(ngModel)]="question.Answer" name="questionField" maxlength="1000"/>
      </mat-form-field> 

    </div>
  </div>
</mat-card>

初始化有所帮助，但文本和文本区域始终处于禁用状态。我只想要textarea被禁用，但如果是文本则应该启用它。我为文本尝试了[disabled] =“false”，但随后一切都已启用。

Answer 1

我觉得代码中可能有2个错误：

首先，*要求您输入变量名称。因此，“变量3121”可能未定义。您需要更新模板，如下所示：

<div class="col-6" [ngSwitch]="question.FormatType.Id">          
  <mat-form-field *ngSwitchCase="'3121'">            
    <textarea ... ></textarea>

  </mat-form-field>
      ...
  <mat-form-field *ngSwitchDefault>

  </mat-form-field> 

</div>

其次，您的question.FormatType.Id可能存在问题，其中Id也可能未定义。

Answer 2

您可以尝试使用此解决方案

我在docs

上创建了演示

ts文件代码

Questions = [
    {
      Question: 'Question 1',
      Answer: 'Answer 1',
      FormatType: {
        Id: '3121655'
      }
    },
    {
      Question: 'Question 2',
      Answer: 'Answer 2',
      FormatType: {
        Id: '3121'
      }
    },
    {
      Question: 'Question 3',
      Answer: 'Answer 3',
      FormatType: {
        Id: '3121'
      }
    }
  ]

ngSwitch以角度5显示文本或文本区域

2 个答案: