nz-select 数据回显失败，大模型救了我一命。
原创nz-select 数据回显失败，大模型救了我一命。
原创
前言
最近老苦逼了。原本计划推进的《软件开发人员从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就可以成功回显呢？真的不是数据类型的问题吗？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。