Angular 4指令显示@input值未定义

Question

我刚接触角度指令，所以我创建了一个指令，如下所示：

从“@angular/core”导入｛Directive，ElementRef，Input，Output｝；@指令({选择器：“[bonusCard]”})导出类奖金卡{@Input（）奖金：string；@Input（）amount:string；@Input（）isSelected：字符串；构造函数（私有el:ElementRef）{el.nativeElement.innerHTML=此.getTemplate（）}获取模板（）{返回“”+'＜div＞'+'<div class=“bonus”>'+this.bonus+'</div>'+'<div class=“amount”>'+this.amount+'</div>'+'<div class=“radio'+（this.isSelected？'isSeleted'：''）+'”></div>'+'</div>'+'';}}

我在模板中使用此指令，如下所示：

<div class=“column col-3”*ngFor=“让b成为bonusJson；让i=index”bonusCard[bonus]=“b.bonus”[amount]=“b金额”[isSelected]=“i==activeBonus”></div>

其中变量定义如下：

bonusJson=[{奖金：1500，金额：2000},{奖金：1000，金额：1000},{奖金：500，金额：500},{奖金：0，数量：100}];activeBonus=0；

但视图没有正确渲染它显示的内容解除绑定如下所示。

$

Answer 1

TL；博士

不要使用的值@输入（）中的属性建造师.使用ng洋葱（）而不是。

---

冗长的回答

您正在执行代码建造师，但是建造师在此之前执行输入s已绑定。

引导应用程序时，Angular将使用新的keywoard及其构造函数就这样执行了。但在这个阶段变化检测循环尚未激活，树尚未附加到DOM公司而且大多数应用程序数据还没有被提取和解析。

构造函数不是放置复杂初始化逻辑的理想位置，您可以读入本指南由Angular团队的开发人员编写。您需要在构造函数中完成的所有操作只是基本的初始化和依赖项注入结果。

在ngOnInit（）挂钩法。相反，当Angular调用此方法时，它已经将每个组件附加到DOM，注入了所有必需的依赖项并处理了输入绑定。您可以安全地使用输入（）毫不畏惧的财产。

---

具体答案

回到你的问题，你打电话获取模板（）它在寻找这是个恶棍,这个.数量和this.is已选择但是父组件的视图仍然没有被解析，输入属性也没有被绑定，所以您会收到未定义而不是。

若要避免此问题，请将代码从建造师到ngOnInit挂钩。

导出类BonusCard实现OnInit{@Input（）奖金：string；@Input（）金额：字符串；@Input（）isSelected：字符串；构造函数（私有el:ElementRef）{}ng启动（）{this.el.nativeElement.innerHTML=this.getTemplate（）}

---

最后三个音符

我想提供三个额外的建议来改进您的代码：

• 使用DomSanitizer在组件内绑定HTML，您可以阅读更多在这里.
• 使用模板字符串，你可以用它来代替你的引号（`），这样你就可以在几行上写模板
• 你可以使用===而不是==，如果您确定要比较相同类型的两个变量，如本例所示。

因此：

[isSeleted]=“i===活动基金”

和

返回`<div><div class=“bonus”>${this.bonus}${this.amount}<div class=“radio${this.isSelected？'is_seleted'：''}”></div></div>`；