前言

最近老苦逼了。原本计划推进的《软件开发人员从0到1实现物联网项目》项目因为种种原因停滞了将近一个月，进展缓慢。其中一个原因就和本文有关。

继《时隔5年重拾前端开发，却倒在了环境搭建上》之后，就一直在赶这个项目的进度。这次又又又又又是前端问题，再次分享给和我一样不懂Angular框架的程序员们。

问题现象

先说一下这个问题的现象：nz-select没有回填数据。

option下拉框中是有可选项的，只不过设置的数据没有显示出来。

代码是这样的：

<nz-form-item>
  <nz-form-label nzRequired>字段1</nz-form-label>
  <nz-form-control>
    <nz-select  formControlName="namexxx" >
              <nz-option *ngFor="let data of xxx" nzValue="{{data.id}}" nzLabel="{{data.name}}"></nz-option>
    </nz-select>
  </nz-form-control>
</nz-form-item>

this.validateForm.setValue({
  namexxx: this.namexxx,
});

老铁们能看出哪里有问题不？

无奖竞答…

问题解决经过

数据类型的问题？

说实话，这个问题的产生是我万万没有想到的。因为在此之前是可以正常回填的，直到我改了nzValue的属性，原本是nzValue="{{data.key}}"。

data.key和data.id两个数据类型不一样，前者为String，后者为int，奥，应该是Number。

所以，在出现问题后，我的第一想法就是：难道跟数据类型有关系？

随后在变量定义处指定了数据类型。结果依然是：没有回显数据。

经过后续的多次反复尝试与折腾，我愈发坚定地认为：一定是数据类型的原因。

但是，折腾了半天，依然没有解决。

求助大模型

那怎么办？根据我多年的开发经验，只能求助大模型了。

我将代码发给大模型后，给我的回答如下

您的 nz-option 中使用了插值表达式 {{data.id}} 和 {{data.name}}，这在 Angular中通常是用于模板中显示动态数据的方式。但在 nz-option 的 nzValue 和 nzLabel 属性中，您应该直接绑定属性而不是使用插值表达式。正确的做法应该是使用属性绑定，如下所示：

<nz-option *ngFor="let data of xxx" [nzValue]="data.id" [nzLabel]="data.name"></nz-option>

请注意，我去掉了插值表达式 {{}}，并使用了方括号 [] 来表示属性绑定。

原来{{}}叫插值表达式，我一直以为就是数据双向绑定的写法。还有，属性绑定是什么鬼？？？

问题解决

参考了大模型的回答，我对代码进行了相应的调整，然后，成功了…

小小的疑问

由于时间关系，鄙人没有深入了解插值表达式和属性绑定的区别。哪位大佬可以言简意赅为小弟解惑一下。

还有，为什么字符串类型的value就可以成功回显呢？真的不是数据类型的问题吗？