如何在angular

Question

我正在使用innerHtml以角度显示变量的html内容，但它不支持外部样式和ngFor。在以下屏幕中，每当用户单击添加服务按钮时，一行应递增。 这是服务列表中具有的数据。

<div class="col-sm-6 col-md-4">
    <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label>
    <div class="nice-wrap">
    <select class="js-example-basic-single nice-textbox"  style="width: 105%">
      <optgroup *ngFor="let item of serviceObject" label='{{item.categoryName}}'>
        <option *ngFor="let service of item.services">
          {{service.serviceName}} -&nbsp;&nbsp;<span >{{item.categoryName}}</span> 
        </option>
      </optgroup>
    </select></div>
  </div>

我尝试过innerHtml

 <div [innerHTML]="divItem"></div>

但它显示为

Answer 1

根据您的问题，Angular无法像您设想的那样工作。当您使用Angular编写模板时，实际上不是HTML，而是Angular编译器（ngc）已知的自定义Angular语法。您的模板被转换为TypeScript代码，该代码根据模型来操作DOM（然后由tsc转换为JavaScript，以便浏览器可以执行它。）

这种转换是在编译代码时发生的。当到达用户的浏览器时，其中几乎没有Angular模板：没有*ngFor，没有{{插值。

因此，将innerHTML设置为Angular的语法（例如*ngFor或{{ }}）将不起作用，因为您试图在应用程序的运行时进行操作。您必须调整逻辑和以更结构化的方式构建模板。

您无需将{{ a }}的字符串与[innerHTML]一起设置为元素，而是切换逻辑，以便拥有一个对象，例如{ a: 'value' }，并预先定义模板例如该元素中的{{ obj.a }}。

Answer 2

我认为您想在HTML中动态添加反应形式。

前段时间我遇到了这种情况，因为我不得不动态添加新段落。

在这段代码中，我有一个文本区域作为该段的输入。我可以通过单击Add New Paragraph按钮来添加段落，而可以通过单击Remove按钮来删除段落。

  

.html文件应具有-

<div formArrayName="contentDescriptions">
  <div *ngFor="let contentItem of contentDescriptions.controls; let i=index">
    <textarea [formControlName]="i" name="" id="" cols="30" rows="6" placeholder="Enter Description"></textarea>
    <button (click)="deleteContentDescription(i)"> Remove</button>        
  </div>

  <div>
    <button (click)="addNewParagraph()">
      <span class="icon icon-plus"></span>  Add New Paragraph
    </button>
  </div>
</div>

  

.ts文件应具有-

form = this.fb.group({
  contentDescriptions: this.fb.array([
    this.fb.control('')
  ])
});

get contentDescriptions() {
  return this.form.get('contentDescriptions') as FormArray;
};

constructor(private fb: FormBuilder) { }

ngOnInit(){
  this.form.patchValue({
    contentDescriptions: this.contentSelected.descriptionArray
  });
}

addNewParagraph(){
   this.contentDescriptions.push(this.fb.control(''));
}

deleteContentDescription(i){
  this.contentDescriptions.removeAt(i);    
}