使用angular 2中的数据模型和类型脚本将HTML元素添加或删除到视图中，而不使用innerHTML和标准structural指令

在smartGWT中，有各种小部件类，它们可以扩展并创建所需的布局。在运行时，这些布局将添加到html中。现在，我想使用Angular 2和TypeScript执行类似的操作，即在类中编写代码，以便在运行时将html表单和其他元素添加到视图中

下面是代码

此代码提供一个select元素（select1）

要求

当用户选择一个选项时，另一个选择项（select2）应添加到视图中，并且select 2的选项应为select1中所选项目的属性。当select1中的选项更改时，Select2的选项也应更改

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot(), FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/relatedLink.component.html',
})
export class AppComponent  { 

    relatedLinkList : Array<RelatedLinkImpl> = [new RelatedLinkImpl('Object0', 'Object0.object', ["a0","b0","c0"]), new RelatedLinkImpl('Object1', 'Object1.object', ["a1","b1","c1"]), new RelatedLinkImpl('Object2', 'Object2.object', ["a2","b2","c2"])];
    selectedLinkItem : RelatedLinkImpl;

    onConceptSelection() : void { 
        if (this.selectedLinkItem != null) {
            console.log("Link Text : " + this.selectedLinkItem.linkText + " Link Type : " + this.selectedLinkItem.linkType + " Link Properties : " + this.selectedLinkItem.linkProperties);
        }       
    }
 }

    export class RelatedLinkImpl {
  private _linkText : string;
  private _linkType : string;
  private _linkProperties : Array<string> = new Array<string>();

  constructor(linkText : string , linkType : string, linkProperties : string[]) {

    this._linkText = linkText;
    this._linkType = linkType;
    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }

  get linkText() : string {
    return this._linkText;
  }

  set linkText(linkText : string) {
    this._linkText = linkText;
  } 

  get linkType() : string {
    return this._linkType;
  }

  set linkType(linkType : string) {
    this._linkType = linkType;
  }

  get linkProperties() : string[] {
    return this._linkProperties;
  }

  set linkProperties(linkProperties : string[]) {

    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }
}

应用程序模块.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot(), FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/relatedLink.component.html',
})
export class AppComponent  { 

    relatedLinkList : Array<RelatedLinkImpl> = [new RelatedLinkImpl('Object0', 'Object0.object', ["a0","b0","c0"]), new RelatedLinkImpl('Object1', 'Object1.object', ["a1","b1","c1"]), new RelatedLinkImpl('Object2', 'Object2.object', ["a2","b2","c2"])];
    selectedLinkItem : RelatedLinkImpl;

    onConceptSelection() : void { 
        if (this.selectedLinkItem != null) {
            console.log("Link Text : " + this.selectedLinkItem.linkText + " Link Type : " + this.selectedLinkItem.linkType + " Link Properties : " + this.selectedLinkItem.linkProperties);
        }       
    }
 }

    export class RelatedLinkImpl {
  private _linkText : string;
  private _linkType : string;
  private _linkProperties : Array<string> = new Array<string>();

  constructor(linkText : string , linkType : string, linkProperties : string[]) {

    this._linkText = linkText;
    this._linkType = linkType;
    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }

  get linkText() : string {
    return this._linkText;
  }

  set linkText(linkText : string) {
    this._linkText = linkText;
  } 

  get linkType() : string {
    return this._linkType;
  }

  set linkType(linkType : string) {
    this._linkType = linkType;
  }

  get linkProperties() : string[] {
    return this._linkProperties;
  }

  set linkProperties(linkProperties : string[]) {

    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }
}

应用程序组件.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot(), FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/relatedLink.component.html',
})
export class AppComponent  { 

    relatedLinkList : Array<RelatedLinkImpl> = [new RelatedLinkImpl('Object0', 'Object0.object', ["a0","b0","c0"]), new RelatedLinkImpl('Object1', 'Object1.object', ["a1","b1","c1"]), new RelatedLinkImpl('Object2', 'Object2.object', ["a2","b2","c2"])];
    selectedLinkItem : RelatedLinkImpl;

    onConceptSelection() : void { 
        if (this.selectedLinkItem != null) {
            console.log("Link Text : " + this.selectedLinkItem.linkText + " Link Type : " + this.selectedLinkItem.linkType + " Link Properties : " + this.selectedLinkItem.linkProperties);
        }       
    }
 }

    export class RelatedLinkImpl {
  private _linkText : string;
  private _linkType : string;
  private _linkProperties : Array<string> = new Array<string>();

  constructor(linkText : string , linkType : string, linkProperties : string[]) {

    this._linkText = linkText;
    this._linkType = linkType;
    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }

  get linkText() : string {
    return this._linkText;
  }

  set linkText(linkText : string) {
    this._linkText = linkText;
  } 

  get linkType() : string {
    return this._linkType;
  }

  set linkType(linkType : string) {
    this._linkType = linkType;
  }

  get linkProperties() : string[] {
    return this._linkProperties;
  }

  set linkProperties(linkProperties : string[]) {

    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }
}

从'@angular/core'导入{Component}；
从“./RelatedLinkImpl”导入{RelatedLinkImpl}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:'app/relatedLink.component.html'，
})
导出类AppComponent{
relatedLinkList:Array=[new RelatedLinkImpl（'Object0'，'Object0.object'，[“a0”，“b0”，“c0”]），new RelatedLinkImpl（'Object1'，'Object1.object'，[“a1”，“b1”，“c1”]），new RelatedLinkImpl（'Object2'，'Object2.object'，[“a2”，“b2”，“c2”]）；
selectedLinkItem:RelatedLinkImpl；
onConceptSelection（）：void{
if（this.selectedLinkItem！=null）{
console.log（“链接文本：+this.selectedLinkItem.linkText+”链接类型：+this.selectedLinkItem.linkType+”链接属性：+this.selectedLinkItem.linkProperties”）；
}       
}
}

RelatedLinkImpl.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule); 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, NgbModule.forRoot(), FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/relatedLink.component.html',
})
export class AppComponent  { 

    relatedLinkList : Array<RelatedLinkImpl> = [new RelatedLinkImpl('Object0', 'Object0.object', ["a0","b0","c0"]), new RelatedLinkImpl('Object1', 'Object1.object', ["a1","b1","c1"]), new RelatedLinkImpl('Object2', 'Object2.object', ["a2","b2","c2"])];
    selectedLinkItem : RelatedLinkImpl;

    onConceptSelection() : void { 
        if (this.selectedLinkItem != null) {
            console.log("Link Text : " + this.selectedLinkItem.linkText + " Link Type : " + this.selectedLinkItem.linkType + " Link Properties : " + this.selectedLinkItem.linkProperties);
        }       
    }
 }

    export class RelatedLinkImpl {
  private _linkText : string;
  private _linkType : string;
  private _linkProperties : Array<string> = new Array<string>();

  constructor(linkText : string , linkType : string, linkProperties : string[]) {

    this._linkText = linkText;
    this._linkType = linkType;
    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }

  get linkText() : string {
    return this._linkText;
  }

  set linkText(linkText : string) {
    this._linkText = linkText;
  } 

  get linkType() : string {
    return this._linkType;
  }

  set linkType(linkType : string) {
    this._linkType = linkType;
  }

  get linkProperties() : string[] {
    return this._linkProperties;
  }

  set linkProperties(linkProperties : string[]) {

    for(var i=0; i<linkProperties.length; i++) {
        this._linkProperties.push(linkProperties[i]);
    }
  }
}

导出类RelatedLinkImpl{
私有链接文本：字符串；
私有链接类型：字符串；
private _linkProperties:Array=new Array（）；
构造函数（linkText:string，linkType:string，linkProperties:string[]）{
这是。_linkText=linkText；
这是。_linkType=linkType；
对于（var i=0；i）“以下是我当前的工作代码”…那么，如果有效，问题是什么？代码只针对单个选择项，代码在控制台上打印响应值。同样，问题是什么？您是否希望我们为您编写代码，以便第二个选择项有效？因为这不是堆栈溢出的原因。为什么不尝试解决它，然后发布您遇到问题的代码…不。问题是如何将html元素从组件类添加到视图模板中，或者如何将html元素添加到模板视图中。这就是我给出smartgwt示例的原因。因此，必须有人了解smartgwt才能理解问题？您应该回答问题，以准确解释您是什么不理解。请阅读了解更多信息。