Question

我有一个具有名称属性的问号调查表。

app.component.ts

import {Questionaire} from '../questionaire.model';

questionaire : Questionaire;

根据我的html代码中的Questionaire类的名称属性，我需要使用* ngIf显示select元素的不同选项值我想在 app.component.html

中做些什么

<select 
 class="form-control" 
 name="proposal" 
 required 
 ngModel
 >
   <div *ngIf = "questionaire.name === 'credit'">
     <option value="">Select</option>
     <option value="Proposal">Proposal</option>
     <option value="ndg">NDG</option>
     <option value="credit">Credit Line</option>
   </div>
   <div *ngIf = "questionaire.name === 'asset'">
     <option value="">Select</option>
     <option value="Proposal">Proposal</option>
     <option value="asset">Asset</option> 
   </div>
 </select>

我无法达到我想做的目的。

我希望我很清楚。

Answer 1

您应该将数据逻辑移动到组件的打字稿部分中。您的模板应该只包含表示逻辑

public interface Kvp {
  value: string;
  label: string;
}

export class AppComponent implements OnInit {

  questionaire : Questionaire;
  options: Kvp[];

  ngOnInit(): void {
    if (this.questionnaire.name === 'credit') {
      this.options = [
        {value: 'Proposal', label: 'Proposal'},
        {value: 'ndg', label: 'NDG'}
      ];
      // You can do the rest ;-)
    }
  }

}

然后，在您的模板中，只需遍历＆＃34;选项＆＃34;

<select class="form-control" 
   name="proposal" 
   required 
   ngModel>
     <option value="">Select</option>
     <option *ngFor="let item from options" value="{{item.label}}">{{item.value}}</option>
</select>

注意：您的AppComponent中不应该有任何业务逻辑。该组件应仅包含子组件。

Answer 2

使用ng-template代替Div，如下所示：

<select class="form-control" name="proposal" required ngModel *ngIf="questionaire.name === 'credit' else asset ">
    <option value="">Select</option>
    <option value="Proposal">Proposal</option>
    <option value="ndg">NDG</option>
    <option value="credit">Credit Line</option>
</select>
<ng-template #asset>
    <option value="">Select</option>
    <option value="Proposal">Proposal</option>
    <option value="asset">Asset</option>
</ng-template>

Answer 3

不是在div上使用* ngIf而是在ng-container上使用它，它对我有用。

这是一段代码：

<select 
 class="form-control" 
 name="proposal" 
 required 
 ngModel
 >
   <option value="">Select</option>
   <option value="Proposal">Proposal</option>
   <ng-container *ngIf = "questionaire.name === 'credit'">
     <option value="ndg">NDG</option>
     <option value="credit">Credit Line</option>
   </ng-container>
   <ng-container *ngIf = "questionaire.name === 'asset'">
     <option value="asset">Asset</option> 
   </ng-container>

</select>

我希望它可以提供帮助。

（Angular 5）* ng如果没有选择/选项

3 个答案: