양식 및 목록으로 구분 된 구성 요소

Question

양식을 제출 한 후 모델을 만들려고하는데 문제가 생겼습니다. API를 사용하지 않고 있습니다. 익명으로 "Twitter Like"를 데이터베이스 나 다른 것없이 만들려고합니다. . TweetList.component.ts에 내 "tweets"를 저장하기 위해 배열을 사용하고 있습니다. 내 TweetList를 양식과 동기화하는 방법을 모르겠습니다. 나는 EventEmitter에 대해 생각하고 있었지만 그다지 적당하지 않은 것 같다. 나는 내 양식과 내 트윗리스트에 의존하는 방법을 몰랐다.

둘 다 내 관점에서 "보기"인 다른 구성 요소 "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'

당신의 도움이, 한 번 더 주셔서 감사합니다.

제레미.

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 
    } 

} 

, 나는 그것도 살펴해야합니다.