* ng對於不起作用並且控制台中沒有錯誤

Question

我經歷了“ ngFor無法正常工作”的大多數問題。 以下是詳細信息。

app.modules.ts

import { NgModule } from '@angular/core';    
import { BrowserModule } from '@angular/platform-browser';    
import { TweetComponent } from './tweet.component';    
import { AppComponent } from './app.component';

@NgModule({    
    imports: [BrowserModule],
    declarations: [AppComponent, TweetComponent],
    bootstrap: [AppComponent]
    })

export class AppModule { }

app.components.ts

import { Component } from '@angular/core';
import { CommonModule } from "@angular/common";

@Component({
  selector: 'my-app',
  template: `<h1>List of tweets</h1>
            <tweets><tweets>`,
 })

export class AppComponent  { name = 'Angular'; }

tweet.component.ts

import { Component } from "@angular/core"
@Component({
   selector: 'tweets',
   template: `<ul>
                <li *ngFor="let item of myList">
                     <span> {{ item}}</span>
                  </li>  
              </ul> `
})

export class TweetComponent {
        myList: ['.net', 'C#', 'web services'];
}

輸出：

元素：

並且控制台中有錯誤。

Answer 1

應該是

myList = ['.net', 'C#', 'web services'];

如果您使用:它將嘗試聲明字段類型。

例：

myList: Array<string> = ['.net', 'C#', 'web services'];

Answer 2

有兩個問題，

數組myList中的值應使用=分配

myList= ['.net', 'C#', 'web services'];

而且您在模板上缺少標簽

@Component({
  selector: 'my-app',
  template: `<h1>List of tweets</h1>
            <tweets></tweets>`,
 })