Question

HeJ小鼠，我遇到按钮问题，应该增加数字+ = 1并在视图中显示这个数字。

app.component.ts

import { Component } from '@angular/core';
import { CounterService } from '../common/services/counter.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
constructor(private counterService: CounterService) {}
get count() {
    return this.counterService
  }
  set count(count){
    this.counterService.count += 1;
  }
}

counter.service

export class CounterService {
count = 0;
}

app.component.html

<div class="container">
  <div>
    <p> {{ counterService.count }}</p>
    <button  (click)="count()" class="btn btn-default form-control increaseBtn">INCREASE</button>
  </div>
</div>

我可以显示0，但是当我以递增方式堆叠时。 Thx提前！

Answer 1

试一试：

public getCount() {
  return this.counterService.count
}
public incCount(){
  this.counterService.count += 1;
}

in html：

<button  (click)="incCount()" class="btn btn-default form-control increaseBtn">INCREASE</button>

并在counter.service：

export class CounterService {
  public count = 0;
}

但更好地管理服务中的变量

Answer 2

app.component.ts

AVCaptureAudioDataOutput

app.component.ts

<button type="text" class="btn btn-primary" (click)="onShowLog()">Click Me</button>

<p *ngIf="showLog">{{ log }}</p>

单击按钮并通过组件增加数字 - 角度

2 个答案: