angular - 如果创建了按钮，角度添加计数器++？

Question

我的 Angular 按钮在单击时应该添加一个新按钮，按钮应该count++是 ，因此每次单击按钮时，按钮内的数字都应添加到 + 1。

这里的主要问题是，我尝试使用服务将一个数字从一个组件发送到另一个组件，并且每次单击该按钮时，它都应该添加一个带有该新数字的新按钮。

我希望你们能帮助我，这是我到目前为止得到的：

app.component.html

<div>
  <h2>By click on plus there should be added a new button with a new number</h2>
  <div class="item" *ngFor="let item of obj" (click)="addButton()">
    <span>{{item.id}}</span>
    <span>{{item['count'] ? item['count'] : item['count'] = 0}}</span>
    <button (click)="increment(item)">plus</button>
    <button (click)="decrement(item)">minus</button>
  </div>
</div>
<app-dialog></app-dialog>


<p>Add Button with different number</p>
<h2>{{counter}}</h2>

<div *ngFor="let button of buttons">
  <button (click)="addButton()">{{counter}}</button>
</div>

app.component.ts

import { isNgTemplate } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { ShareDataService } from './share-data.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  clickEventsubscription: Subscription

  id: number;
  title:String;

  obj = [{ id: 0, }, { title: 'test' }];

  constructor(private share: ShareDataService) {
    this.clickEventsubscription = this.share.getClickEvent().subscribe(() => {
      this.incrementCount(this.counter);
      this.addButton();
    })
  }
  ngOnInit() {
  }
  counter: number = 0;
  incrementCount(counter: any) {
    this.counter++;
  }


  increment(item) {
    item.count++;
  }
  decrement(item) {
    item.count--;
  }

  buttons : {
    id    : number,
}[] = [{ id : 0}];

// Function to add new button
addButton(){
    this.buttons.push({
        id    : this.buttons.length,
    })
  }
}

这是 dialog.component.html：

<ol>
    <li>
      <button mat-raised-button (click)="openDialog()">Pick one</button>
    </li>
    <li *ngIf="animal">
      You chose: <i>{{animal}}</i>
    </li>
  </ol>
  <button (click)="clickMe()">Add id 1</button>
  

对话框.component.ts：

import { Component, Inject, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { ShareDataService } from './../share-data.service';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})

export class DialogComponent implements OnInit {
  animal: string;
  name: string;

  constructor(public dialog: MatDialog, private share: ShareDataService) {}
  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

  clickMe(){
    this.share.sendClickEvent();
  }

最后我的服务：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ShareDataService {

  private subject = new Subject<any>();

sendClickEvent(){
  this.subject.next();
}

getClickEvent() : Observable<any>{
  return this.subject.asObservable();
}

}

谢谢！

想象一下它现在的样子

想象一下它应该是什么样子

它不应该是什么样子的图片

标签： angularbuttoncounter