#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