空格显示为问号[关闭]

Question

我刚开始使用角度。我将 .html 文件作为输入并使用 sanitizeHtml 管道在网页中预览 .html 的内容。问题是空格显示为问号。我尝试使用 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 但它不起作用，并且在此过程中没有后端干预。提前致谢

Answer 1

您可以使用角度动态反应形式来实现这一点

HTML：

<div class="container-fluid">
  <h3>
    <b>Create Test in 3 Steps</b>
  </h3>

  <form [formGroup]="form" ngNativeValidate>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>No. of Questions</th>
          <th>Subject</th>
          <th>Category</th>
          <th>Topic</th>
          <th>Solution Type</th>
          <th>Question Type</th>
          <th>Marks</th>
          <th>Negative Marking</th>
          <th>Difficulty</th>
      </tr>
      </thead>

      <tbody  class="form-group" formArrayName="items">
        <tr *ngFor="let row of form.get('items').controls; let i = index" [formGroupName]="i">
            <td class="col-md-1">    
              <input type="number" formControlName="questions" class="form-control" name="questions" value="0"> 
            </td>
            <td>
              <select class="form-control" name="subjects" formControlName="subjects">

                <option [value]="" disabled selected>Select</option>
                <option *ngFor="let map of subject_maps" [value]="map._id" [selected]="map == subject_map">
                  {{ map.subject_node.fullform }}</option>
              </select>
            </td>
            <td>
              <select  class="form-control" name="category" formControlName="category">
                <option [value]="" disabled selected>Select</option>
                <option *ngFor="let cn of subject_maps?.subject_node?.category_nodes" [value]="cn._id" [selected]="cn._id == selected_category?._id">
                  {{ cn.fullform }}</option>
              </select>
            </td>
            <td>
              <select class="form-control" name="topics" formControlName="topics">
                <option [value]="" disabled selected>Select</option>
                <option *ngFor="let tn of selected_category?.topic_nodes" [value]="tn._id" [selected]="tn._id == selected_topic?._id">
                  {{ tn.fullform }}</option>
              </select>
            </td>
            <td>
              <select  class="form-control" name="solutionT" formControlName="solutionT">
                <option value="knowledge" selected>Knowledge</option>
                <option value="formula">Formula</option>
              </select>
            </td>
            <td>
              <select class="form-control"  name="questionT" formControlName="questionT">
                <option value="mcq" selected>MCQ</option>
                <option value="msq">MSQ</option>
                <option value="numerical">Numerical</option>
              </select>
            </td>
            <td class="col-md-1">
              <input type="number" formControlaName="marks" class="form-control" name="marks" value="1" > 
            </td>
            <td class="col-md-1">
              <input type="number" class="form-control" name="Nmarks" value="0" formControlaName="Nmarks"> 
            </td>
            <td>
              <select class="form-control" name="difficulty" formControlaName="difficulty">
                <option value="easy" selected>Easy</option>
                <option value="medium">Medium</option>
                <option value="hard">Hard</option>
              </select>
            </td>
            <td>
              <button class="btn btn-danger" (click)="deleteRow(i)">Delete</button>
            </td>
        </tr>
      </tbody>
    </table>
    <div class="text-center">       
       <button class="btn btn-primary" (click)="addItem()">ADD more rows</button>
    </div>
  </form>
<div class="container">
<div class="pull-right generate_button">
  <button class="btn btn-danger" (click)="create()">Generate</button>
</div>
</div>  
</div>

TS：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  form: FormGroup;
  items: FormArray;
  constructor(private fb : FormBuilder) {}
  ngOnInit () {
    this.form = this.fb.group({
        items: new FormArray([this.createItem()])
      })
  }
  createItem(): FormGroup {
    return this.fb.group({
        questions: '',
        subjects: '',
        category: '',
        topics: '',
        solutionT: '',
        questionT: '',
        marks: '',
        Nmarks: '',
        difficulty: ''
    });
  }
  addItem(): void {
    this.items = this.form.get('items') as FormArray;
    this.items.push(this.createItem());
    console.log(this.form.get('items').value);
  }
  deleteRow(index: number) {
    this.items.removeAt(index);
  }
}

Stackblitz 链接供参考：- https://stackblitz.com/edit/angular-j3jw7q?file=src%2Fapp%2Fapp.component.ts

Answer 2

像这样编写添加按钮模板： 创建一个输入对象，然后添加以索引为值的 id 属性，然后将此对象发送到行数组中。

  <button class="btn btn-primary" (click)="addrows({id:rows.length})">ADD more rows</button>


<button class="btn btn-danger" (click)="deleterow(i)">Delete</button>

创建如下所示的行数组：

row:any[]=[];

然后编写你的 add 方法：

  addrows(row) {
    this.rows.push(row);
  }

您的删除行必须是这样的：

deleterow(id) {
    this.rows.splice(
      rows.indexOf(a => a.id=== id),
      1,
    );
  }