问Angular 5-表格格式错误(html页面)

EN

<table>
   <thead>
      <tr>
        <th>Period</th>
        <th *ngFor="let m of types.Testing">
          {{m.colors}}
        </th>
      </tr>
    </thead>
    <tbody>
      <th></th>
    </tbody>
</table>

import { Component } from '@angular/core';
import {Mytypes} from './model';
import { myserv } from './shared.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 6';

    public types: Mytypes;

    constructor(public _service: myserv) {}

    ngOnInit() {
      this.types = this._service.GetData(true);
    }
}

import { Injectable } from '@angular/core';
import {Mytypes, types} from './model';

@Injectable()

export class myserv{

  //sourc - not currently in use
  GetData(sourc: boolean): Mytypes{

    var view = new Mytypes();

    var main = new types();
    main.tests= [
      "--"
    ];
    main.colors= [
      "Blue" , "Red" , "Yellow"
    ];

    view.Testing = [
      main 
    ]

    return view;
}

  constructor() { }
}

import { Injectable } from '@angular/core';

@Injectable()
export class types{

  public tests: Array<string>;
  public colors: Array<string>;

  constructor() { }
}

@Injectable()
export class Mytypes{

  public Testing: Array<types>;
  constructor() { }
}

Blue,Red,Yellow

Blue   Red   Yellow