Angular 角度形状：[所选]不工作

这是我的TS代码：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form: FormGroup;

  constructor() { }

  datas = [{id:1, lib: "London"}, {id:2, lib: "Madrid"}, {id: 3, lib: "Berlin"}]

  myCity = "London";

  ngOnInit() {
    this.form = new FormGroup({
      city: new FormControl()
    })
  }

}

这是我的模板：

<form [formGroup]="form" (ngSubmit)="go()">
  <select name="" formControlName="city">
    <option *ngFor="let data of datas" [value]="data.id" [selected]="myCity == data.lib">{{data.lib}}</option>
  </select>
  <button type="submit()">click</button>
</form>

{{data.lib}
点击

我可以看到我的表单与我可以选择的3个值正常工作。但默认情况下，我应该看到“伦敦”，但什么也没有出现。默认情况下，我的值为空

我不明白为什么。我的代码似乎正确

---

谢谢

完全删除所选的

属性，并修改创建表单的代码：

city: new FormControl('1') // London has id 1

您需要删除
formControlName=“city”
，您的代码将非常有效。原因是您绑定了两次，一次是使用
formControlName=“city”
，另一次是使用
selected
属性

<form [formGroup]="form" (ngSubmit)="go()">
  <select name="">
    <option *ngFor="let data of datas" [value]="data.id" [selected]="myCity == data.lib">{{data.lib}}</option>
  </select>
  <button type="submit()">click</button>
</form> 


{{data.lib}
点击

谢谢。我知道可以这样做。但在我的实际项目中，我的表单结构、数据等。。。来自RESTAPI，所以我动态创建了formGroup，其中包含来自HTTP协议的大量数据通信。我不能详细说明，但相信我，这很难。我想直接在模板中初始化数据。这在不初始化FormControl的情况下是可能的吗？老实说，我至少需要一小部分代码，但我相信即使您动态创建它，您仍然可以以某种方式设置默认值。是的，这是可能的，而且可能会做到。但我希望我能使用[selected]，看起来更容易。您仍然在代码中显示
formControlName=“city”
。@AmitChigadani Opps在粘贴答案时忘记删除。Answer Updated但如果我删除formControlName，此选择控件不再是我的formGroup实例的一部分Yes，right。因此，您应该只需要绑定选中的
或
formControlName
。我发布的解决方案中选择了
一个，正如您在question@PardeepJain这两者的结合对我很有效。