Question

我试图在提交表单后创建模型时遇到问题，我没有使用任何api，我试图在没有db或其他任何东西的情况下在本地制作匿名“Twitter Like”。我正在使用数组在TweetList.component.ts中存储我的“推文”。我不知道如何将我的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>

现在我有关于模板的问题。

“exportAs”设置为“ngForm”
没有指令

我找到的所有帮助都是关于Angular 2和导入表单，但它在Angular 4中不起作用。任何想法？（也许我应该开一个新主题，让你们其中一个回答主要问题？）

angular.io doc的示例： import { FormsModule } from '@angular/forms'

再次感谢您的帮助。

的Jérémy。

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
  }

}

如果您要为表单问题设置另一个问题并标记我，那么我也会看一下。

表单和列表分离的组件

1 个答案: