フォームとリストで区切られたコンポーネント

Question

フォームを送信した後にモデルを作成しようとすると問題が発生しました。私はAPIを使用していません。db以外のものをローカルで匿名の「Twitter Like」にしようとしています。 。私はTweetList.component.tsに私の "つぶやき"を格納する配列を使用しています。 TweetListをフォームと同期させる方法がわかりません。私はEventEmitterについて考えていたが、あまり適切ではないようだ。私は自分のフォームと私のtweetlistに頼る方法を考えなかった。

どちらも、私のパースペクティブでは「ビュー」である他のコンポーネント「tweets.component.ts」から呼び出されます。

tweetform.component.ts：

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

import { Tweet } from '../tweet/tweet.component'; 

@Component({ 
    selector: 'tweetform' 
}) 
export class TweetFormComponent{ 
    private auteur: string; 
    private message: string; 
    private model: Tweet; 

    onSubmit(){ 
     this.model = new Tweet(this.auteur, this.message); 
     this.auteur = ""; 
     this.message = ""; 
    } 
} 

tweetform.component.html：

<form (ngSubmit)="onSubmit()" #tweetform="ngForm"> 
    <div class="form-group"> 
     <label for="auteur">Auteur :</label> 
     <input type="text" id="auteur" [(ngModel)]="tweetform.auteur" name="auteur" required> 
    </div> 
    <div class="form-group"> 
     <label for="message">Message :</label> 
     <input type="text" id="message" [(ngModel)]="tweetform.message" name="message" required> 
    </div> 
    <button type="submit" class="btn btn-success">Envoyer !</button> 
</form> 

<p> Auteur: {{ tweetform.model.getAuteur() }}/Message: {{ tweetform.model.getMessage() }} 

tweetlist.component.ts：

import { Component } from '@angular/core'; 
import { Tweet } from "../tweet/tweet.component"; 

@Component({ 
    selector: 'tweetlist', 
    templateUrl: 'app/tweets/tweetlist.component.html' 
}) 
export class TweetListComponent{ 
    private tweets: Tweet[]; 

    constructor(){ 
     this.tweets=[new Tweet('Jokoast','Salut tout le monde')]; 
    } 
} 

tweetlist.component.html：

<div class="pre-scrollable"> 
    <div class="well-sm" *ngFor="let tweet of tweets"><span class="label label-success">{{ tweet.getAuteur() }}</span> {{ tweet.getMessage() }}</div> 
</div> 

---

ここでテンプレートに関する問題があります。何のディレクティブは「ngForm」に設定された「EXPORTAS」ではありません

私が見つけるすべてのヘルプは2角度とインポートフォームについてですが、それは角度4.任意のアイデアでは動作しません。 ？ （多分私は新しいトピックを開き、主な問題に答えるあなたのいずれかを聞かせてください）angular.ioドキュメントの

例：import { FormsModule } from '@angular/forms'

はあなたの助け、1つのより多くの時間をありがとうございました。

ジェレミー。

Answer 1

別のtweets.serviceを作成する必要があります。 このサービスは、データの取得と保存を担当します。 APIや内部リストから取得しても問題ありません。

サービスにすべてのデータ作業を行い、コンポーネントに注入します（コンポーネントメタにプロバイダとして設定することを忘れないでください）。常にサービスを使用してデータを渡します。

あなたのコンポーネントのコードは：あなたはフォームの問題のために別の質問をアップして、私をタグ付けする場合は

import { TweetService }  from './tweet.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    providers: [ TweetService ] 
}) 
export class AppComponent { 

    // You can inject service like this in other components too 
    constructor(private tweetService: TweetService) { 
    // Do your stuff 
    } 

} 

、その後、私はあまりにも見ています。