如何用TypeScript在HTML中动态生成表格列展示插入排序结果

Got it, let's get your sorted insertion sort results showing up as a proper table row with dynamic columns that match your array length. Here's the step-by-step fix:

First, Clean Up the Component Code #

Your TypeScript has a small typo (sorrtedArray → sortedArray) and we can tweak the initialization to avoid potential array mutation issues. Here's the updated component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  numericArray: number[] = [1, 2, 6, 9, 13, 25, 100, 22, 76, 222];
  sortedArray: number[] = [];
  result: number[] = [];

  ngOnInit(): void {
    // Run insertion sort when the component finishes initializing
    this.result = this.insertion_Sort([1, -2, 6, 90, 13, 25, 100, 22, 76, 222]);
    // Optional: Sort your original numericArray too (without mutating it)
    this.sortedArray = this.insertion_Sort([...this.numericArray]);
  }

  insertion_Sort(arr: number[]): number[] {
    // Create a copy of the input array to avoid changing the original
    const sortedArr = [...arr];
    
    for (let i = 1; i < sortedArr.length; i++) {
      if (sortedArr[i] < sortedArr[0]) {
        sortedArr.unshift(sortedArr.splice(i, 1)[0]);
      } else if (sortedArr[i] > sortedArr[i - 1]) {
        continue;
      } else {
        for (let j = 1; j < i; j++) {
          if (sortedArr[i] > sortedArr[j - 1] && sortedArr[i] < sortedArr[j]) {
            sortedArr.splice(j, 0, sortedArr.splice(i, 1)[0]);
          }
        }
      }
    }
    return sortedArr;
  }
}

Key improvements here:

• Used the OnInit lifecycle hook to run the sort (better practice than running methods directly in class property initialization)
• Made a copy of the input array in insertion_Sort to prevent accidental mutation of the original array
• Fixed the typo in sortedArray

Next, Fix the HTML Template #

Your current HTML has invalid table structure (you can't nest <div> directly inside <table>). We'll use Angular's *ngFor directive to dynamically generate a <td> for every element in your sorted result array:

<div style="text-align:center">
  <h1> Welcome to {{ title }}! </h1>
</div>

<!-- Proper table structure with dynamic columns -->
<table border="1" style="margin: 20px auto;">
  <tbody>
    <tr>
      <!-- Generate a table cell for each value in the sorted array -->
      <td *ngFor="let num of result">{{ num }}</td>
    </tr>
  </tbody>
</table>

How this works:

• *ngFor="let num of result" loops through every element in your result array
• For each element, it creates a <td> (table data cell) containing the number
• The table will automatically have as many columns as there are elements in your array

Optional: Add Some Styling #

If you want to spruce up the table, drop this into app.component.css:

table {
  border-collapse: collapse;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

td {
  padding: 10px 15px;
  border: 1px solid #eee;
  font-size: 16px;
}

That's all! Now your sorted insertion sort results will display as a clean, dynamic table row with columns that adjust to your array's length.

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva