Блог

Главная - Вопросы по программированию - Почему нельзя щелкнуть мой дубликат

Почему нельзя щелкнуть мой дубликат

#javascript #html #typescript #ionic-framework

#javascript #HTML #typescript #ionic-framework

Вопрос:

Я создаю форму, используя HTML / CSS amp; JavaScript, и я добавил кнопку «Добавить», которая отобразит точную копию формы под исходной. Однако существует проблема с элементом ion-select, который находится внутри формы. В исходной форме при нажатии на него будут отображаться все параметры, которые я предопределил. Однако в форме дубликата он просто ничего не покажет при нажатии. Этого не происходит с полем ввода, которое также присутствует в форме.

Вот мой код:

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

const p = document.createElement("p");
p.textContent = "hello-world!";

@Component({
  selector: 'page-logic',
  templateUrl: 'logic.html'
})

export class LogicPage {
  addLogic(){
    alert('adding logic');
    const app = document.getElementById("app");
    var valueNodes = Array.prototype.slice.call(document.getElementsByClassName("logic-grid"));
    var values = valueNodes.map(valueNodes => valueNodes.innerHTML);
    var result = values.join();
    document.getElementById('result').innerHTML = resu<
    app.appendChild(p);
  }
  constructor() {
  }
}
   
 page-logic{
    ion-content {
        background: cornsilk !important;
    }
}
.ion-content{
    zoom: 2;
}

.ionic-select{
    width:200px;
    max-width: 100% !important;
    max-height: 100%;
    right:auto !important;
    direction: rtl !important;
    justify-content: left !important;
}

.ionic-select select::part(text) {
    flex: 0 0 auto;
}

input[type=number]{
    width: 100px;
}   
 <ion-content class = "ion-content">
    <ion-grid class = "logic-grid">
        <ion-row align-items-center>
            <ion-col>
                if
              </ion-col>
              <ion-col>
                <ion-item class = "ionic-select">
                    <ion-label style = "font-size:14px;" color = "light">sensor:</ion-label>
                    <ion-select class = "ionic-select select" placeholder = "sensor var" [(ngModel)]="sensor">
                      <ion-option text-wrap value1='temp'>temp</ion-option>
                      <ion-option text-wrap value1='humid'>humidity</ion-option> 
                      <ion-option text-wrap value1='PH'>PH</ion-option> 
                      <ion-option text-wrap value1='EC'>EC</ion-option> 
                      <ion-option text-wrap value1='CO2'>CO2</ion-option> 
                      <ion-option text-wrap value1='luminance'>luminance</ion-option> 
                    </ion-select>
                  </ion-item> 
              </ion-col>
              <ion-col>
                <ion-item class = "ionic-select">
                  <ion-label style = "font-size:14px;" color = "light">desc:</ion-label>
                  <ion-select class = "ionic-select select" placeholder = "descriptor" [(ngModel)]="desc">
                    <ion-option text-wrap value='greater'>></ion-option>
                    <ion-option text-wrap value='smaller'><</ion-option> 
                  </ion-select>
                </ion-item> 
              </ion-col>
              <ion-col>
                <label>
                  <input style = "zoom:1.5;" type = "number" placeholder = "threshold" ng-model="threshold.val">
                </label>
              </ion-col>
              <ion-col>
                <ion-item class = "ionic-select">
                  <ion-label style = "font-size:14px;" color = "light">device:</ion-label>
                  <ion-select class = "ionic-select select" placeholder = "device" [(ngModel)]="device">
                    <ion-option text-wrap value2='fan'>fan</ion-option>
                    <ion-option text-wrap value2='pump(PH)'>pump PH</ion-option> 
                    <ion-option text-wrap value2='pump(NU)'>pump NU</ion-option>
                    <ion-option text-wrap value2='compressor'>compressor</ion-option>  
                    <ion-option text-wrap value2='light'>light</ion-option> 
                  </ion-select>
                </ion-item> 
              </ion-col>
              <ion-col>
                <ion-item class = "ionic-select">
                  <ion-label style = "font-size:14px;" color = "light">on/off:</ion-label>
                  <ion-select class = "ionic-select select" placeholder = "on/off" [(ngModel)]="onoff">
                    <ion-option text-wrap value3='on'>on</ion-option>
                    <ion-option text-wrap value3='off'>off</ion-option> 
                  </ion-select>
                </ion-item> 
              </ion-col>
              <ion-col>
                for 
              </ion-col>
              <ion-col>
                <label>
                  <input size = "10" style = "zoom:1.5;" type = "number" placeholder = "seconds" ng-model="duration.val">
                </label>
              </ion-col>
        </ion-row>
        <div id = "app"></div>
        <div id="result"></div>
        <script src = "logic.ts"></script>
        </ion-grid>
    <button style="zoom:1.5;" (click)="addLogic()">ADD LOGIC</button>
</ion-content>

Кто-нибудь может помочь определить проблему? Спасибо.

Ответ №1:

Angular не обрабатывает добавленный HTML динамически, он просто добавляет его «как есть» в DOM, поэтому привязки и т.д. Не будут работать, вот почему ваши скопированные компоненты не работают должным образом.

Возможно, вам потребуется изучить ViewContainerRef.createComponent()

Я нашел эту статью полезной для темы:https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d