Question

我是Angular的新手。我在游戏控制组件内创建一个按钮，并使用事件绑定和属性绑定。当我单击按钮时，将使用setInterval方法将数字连续输入数组。我在一个组件之间传递数据。游戏控制组件的选择器在app组件内部被调用。该按钮与click事件一起正常工作，但是当我使用ngFor以便遍历数组并显示按钮时，该按钮也未出现在dom中。预先感谢

game-control.component.html
<div class="row">
  <div class="col-md-12">
    <button 
  class="btn btn-primary" 
  type="button" 
  (click)="gameStart()">Start</button>

<button 
  class="btn btn-danger" 
  type="button" 
  (click)="gameStop()">Stop</button>

  <br>
<p>{{element}}</p>  
  </div>
</div>

game-control.component.ts
export class GameControlComponent implements OnInit {

  @Input() element:number;
  @Output() createNumber= new EventEmitter<number>();
  constructor() { }

  ngOnInit() {
  }
  gameStart()
  {
    this.createNumber.emit(this.element);
  }
}

app.component.html
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <app-game-control                       
      (createNumber)='onStart()'
      *ngFor="let myElement of myHoldings"
      [element]="myElement"
      >  
  </app-game-control>
    </div>
  </div>
</div>

app.component.ts
export class AppComponent {
 myHoldings=[];

 onStart()
 {
   setInterval(()=>{
    this.myHoldings.push(this.myHoldings.length+1);
    console.log("hello");
   },1000);
 }
}

Answer 1

解决方案是在组件中有一个从Input()变量赋值的内部变量

@Input() element:number;

internalNumber : number ;

ngOnInit() {
  this.internalNumber = this.number;
}

然后使用该变量进行绑定或发出事件

对于可能有帮助的类似问题

Click function not being called for a mat-menu with items generated with ngFor

如何修复<！-bindings = {“ ng-reflect-ng-for-of”：“”}->

1 个答案: