Nano Hash - криптовалюты, майнинг, программирование

Angular 5 - компонент добавления события onclick в div

Я использую Angular 5, и у меня есть это:

// app.component.ts
import { Component } from '@angular/core';

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

  appendToContainer() {
    // Do the stuff here
    // Append PanelComponent into div#container
  }

}

Теперь app.component.html

// app.component.html
<button (click)="appendToContainer()"></button>
<div id="container"></div>

и, наконец, у меня есть простой компонент

// panel.component.html
<div class="panelComponent">
  This is a panel Component html
</div>

Что я хочу сделать, так это то, что каждый раз, когда кнопка на app.component.html нажимается, мне нужно добавить panel.component в app.component.html.

Как я могу это сделать?


  • У меня такое чувство, что вы подходите к этой проблеме не с той стороны. Разве вы не должны перебирать массив с *ngFor? 27.11.2017
  • вы можете использовать массив объектов, к которому вы можете добавить при вызове appendToContainer, и использовать *ngFor для создания панели для каждого элемента в массиве 27.11.2017
  • Что я хочу сделать, это создать новый экземпляр компонента и добавить его внутри div при нажатии кнопки 27.11.2017
  • @pedromartinez ты нашел какое-нибудь решение? 14.11.2019

Ответы:


1

Вы можете использовать *ngFor и переменную для достижения желаемого

//In your component
num:number=0

//You html like 
<button (click)="num++"></button>
//we create a array "on fly" and slice to get only a "num" items
<div *ngFor="let item in [0,1,2,3,4,5,6,7,8,9].slice(0,num)" class="panelComponent">
  This is a panel Component html
</div>
27.11.2017
  • Что я хочу сделать, это создать новый экземпляр компонента и добавить его внутри div при нажатии кнопки 27.11.2017
  • Возможно, некоторым нравится blog.dmbcllc.com/dynamically-add-components-in- угловой ? 27.11.2017
  • Кажется, код там не для angular 5. Вот мой app.component.ts: import { Component } from '@angular/core'; импортировать {ChildComponent} из './child/child.component'; @Component({ селектор: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { конструктор() {} addCmp( ) { console.log('добавление'); // Добавляем экземпляр ChildComponent } } 28.11.2017
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..