Angular试图在html元素上使用ngModel

Question

我正在尝试的是：

    <div class = "form-group">
  <label for="funktion">Funktion</label>
  <select formControlName="funktion" id="funktion" class="form-control" ngModel #Funktion="ngModel" required >
    <option *ngFor="let Funktion of funktionen" value="{{Funktion.Name}}">{{Funktion.Name}}</option>
  </select>
</div>
<div *ngIf="Funktion.value == 'Administrator' ">
  Some Text here
</div>

但它收到以下错误：

＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngModel＆＃34; （＆＃34;] #Funktion =＆＃34; ngModel＆＃34;必需＆gt;

我的目标是显示具有值＆＃34;管理员＆＃34;的Funktion。在下拉列表中选择并隐藏它，如果＆＃34;管理员＆＃34;未被选中......

我做错了什么？

Answer 1

  <div class = "form-group">
      <label for="funktion">Funktion</label>
      <select formControlName="funktion" id="funktion" [(ngModel)]="Funktionname" class="form-control"  required >
       <option *ngFor="let Funktion of funktionen" value="{{Funktion.Name}}">{{Funktion.Name}}</option>
      </select>
  </div>
  <div *ngIf="Funktionname == 'Administrator' ">
    Some Text here
  </div>

Answer 2

<div class = "form-group">
  <label for="funktion">Funktion</label>
  <select class="form-control" formControlName="funktion" id="funktion"  [(ngModel)]='seletedValue' required >
    <option *ngFor="let Funktion of dataList" value="{{Funktion.value}}">{{Funktion.name}}</option>
  </select>
</div>
<div *ngIf="seletedValue == 'Administrator' ">
  Some Text here
</div>

Working Example

Answer 3

我遇到了同样的问题，我使用

解决了这个问题

 <div class = "form-group">
    <label for="funktion">Funktion</label>
    <select formControlName="funktion" id="funktion" class="form-control" [(ngModel)]="myFuncName" #Funktion="ngModel" required >
       <option *ngFor="let Funktion of funktionen" value="{{Funktion.Name}}">{{Funktion.Name}}</option>
    </select>
</div>
<div *ngIf="myFuncName == 'Administrator' ">
   Some Text here
</div>