javascript - Angular :@input boolean 和 ngIf 不匹配

Question

(对不起我的英语，这不是我的第一语言......)

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

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 上定义激活:

export class AppComponent  {
   public activation : boolean = false ;

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

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

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

A Stackblitz帮助。

提前致谢!

Answer 1

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

收件人<slider-multiple [modifiable]="activation"></slider-multiple>

modifiable="activation"绑定(bind)到值为 activation 的字符串.

[modifiable]="activation"绑定(bind)到名称为 activation 的组件属性.