Как добавить элементы на страницу во время выполнения

Question

Я создаю демонстрационное веб-приложение на английском языке для колледжа и хочу щелкнуть button, чтобы добавить новый узел в дерево доменов. В JavaScript я бы использовал

document.getElementById('ticket-container').appendChild('app-ticket');

Я не могу найти ответ на этот вопрос, и я бы подумал, что это будет просто.

Какой лучший способ сделать это в angular 8?

*ngFor="let ticket of ticketcount; index as i;

Вот мой ts-файл родительского компонента:

import { Component, OnInit } from '@angular/core';

class Ticket {
  name: string;
  price: number;

  constructor(x: string, y: number){
    this.name = x;
    this.price = y;
  }
}

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

export class PurchaseTicketsComponent implements OnInit {
  total: number;
  ticketCount: number;

  constructor() {
   }

  ngOnInit() {
    this.total = 0;
    this.ticketCount = 0;
  }

  incrementTotal() {
    this.total += 5;
    this.ticketCount ++;
    this.renderNewTicket();
  }

  renderNewTicket() {
    //render ticket code here
  }
}

и файл шаблона:

<main id='ticket-container'>
  <app-ticket ></app-ticket>
  <button mat-icon-button aria-label="new ticket" id="add-ticket" (click)="incrementTotal()" >
    <mat-icon>add</mat-icon> 
  </button>
</main>

<p>Total: €{{total}}</p>

Answer 1

Как я уже упоминал в моих комментариях, кажется, вам нужно использовать массив для хранения элементов, а затем перечислить их в пользовательском интерфейсе, используя *ngFor

Здесь, попробуйте:

import { Component } from "@angular/core";

interface Ticket {
  name: string;
  price: number;
}

@Component({
  selector: "grid-list-overview-example",
  styleUrls: ["grid-list-overview-example.css"],
  templateUrl: "grid-list-overview-example.html"
})
export class GridListOverviewExample {
  tickets: Array<Ticket> = [];
  total: number;

  ngOnInit() {
    this.addTicket();
  }

  addTicket() {
    this.tickets.push({
      name: `Ticket ${this.tickets.length + 1}`,
      price: 10
    });
    this.calculateTotal();
  }

  calculateTotal() {
    this.total = this.tickets
      .map(ticket => ticket.price)
      .reduce((a, b) => a + b, 0);
  }
}

И в вашем шаблоне:

<main id='ticket-container'>
    <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile *ngFor="let ticket of tickets">{{ ticket.name }}</mat-grid-tile>
    </mat-grid-list>

    <button mat-icon-button aria-label="new ticket" id="add-ticket" (click)="addTicket()" >
    <mat-icon>add</mat-icon> 
  </button>

  <p>Total: €{{total}}</p>
</main>

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

Answer 2

Вы используете * ngfor, поэтому храните значения, относящиеся к заявке, в массиве (массиве объектов заявки) и используйте его в шаблоне (с помощью * ngfor). ticketCount - это число и * ng для массива! Добавьте метод в файл TS для обработки события нажатия кнопки и добавьте новое значение в этот массив. Пользовательский интерфейс обновляется соответственно