Angular：@input 布尔值和 ngIf 不匹配

Question

（对不起，我的英语不是我的母语……）

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

slider-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;
 }

slider-multiple.component.html：

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

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

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

在 app.component.ts 上定义了 activation：

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 的组件属性。