如何修复 答案

【问题标题】：How to fix 如何修复 
【发布时间】：2019-05-22 12:12:13
【问题描述】：

我是 Angular 的新手。我正在游戏控制组件中创建一个按钮并使用事件绑定和属性绑定。当我单击按钮时，数字将使用 setInterval 方法连续输入到数组中。我正在将一个组件之间的数据传递给另一个组件。游戏控制组件的选择器在应用组件内部调用。该按钮在单击事件中运行良好，但是当我使用 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);
 }
}

【问题讨论】：

标签： javascript html typescript angular6

【解决方案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

【讨论】：