角度：@input boolean 和 ngIf 不匹配

Question

（抱歉我的英语，这不是我的母语...）

当我用它的模板调用它时，我在我的组件中注入的一些输入参数有一些问题。

滑块-multiple.component.ts ：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'slider-multiple',
  templateUrl: './slider-multiple.component.html'
 })
export class SliderMultipleComponent  {
   @Input() public modifiable: boolean;
 }

滑块-multiple.component.html ：

<button *ngIf="modifiable">Slider Button</button>

指令的调用（例如在 app.component.html 上）：

<slider-multiple modifiable="activation"></slider-multiple>

随着激活的app.component.ts定义：

export class AppComponent  {
   public activation : boolean = false ;

   public activate(){
     this.activation = !this.activation;
   }
 }

只有当指令的激活参数为 true 时，我在组件的 html 模板上定义的按钮才应该可见（通过 *ngIf）。

有谁知道为什么它不能按预期工作？

一个Stackblitz来帮助。

提前致谢 ！

Answer 1

改变 <slider-multiple modifiable="activation"></slider-multiple>

到 <slider-multiple [modifiable]="activation"></slider-multiple>

modifiable="activation"绑定到值为 的字符串activation。

[modifiable]="activation"绑定到名称为 的组件属性activation。