Question

我真的很生气。我尝试了一切。 FormsModules，ReactiveForms，FORMDIRECTIVES，Input，Output我一直在搜索如何在组件之间使用ngModel。我试图在h1标签中显示使用字符串插值在输入标签中键入/删除的值，但它不起作用，这些是文件： app.component.html：

<div class="container text-center" id="headerCont">
  <a href="index.html"><span style="color: #6E2435" class="header">note</span><span style="color: #6BBFDE" class="header">it</span></a>
</div>
<div class="container">
  <app-input></app-input>
  <app-notes></app-notes>
</div>

app.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

notes.component.html

<div class="col-xs-2">
  <h1>{{ TitleInput }}</h1>
  <p>{{ noteInput }}</p>
</div>

input.component.html

<div class="container" id="noteCreate">
  <form id="titleInputForm">
    <input type="text" [(ngModel)]="TitleInput" name="TitleInput">
  </form>
  
<form>
    <textarea name="name" rows="8" cols="80">
    </textarea>
</form>
</div>

如果你能弄清楚我会非常感激。

Answer 1

您实际搜索了它但没有使用它，您的问题的解决方案是[list(filter(None, w)) for w in windows] # [['a', 'b', 'c'], ['c', 'd', 'e'], ['e', 'f', 'g'], ['g', 'h']]和more_itertools.windowed。我相信你没有有效地使用它。

由于其他组件由名为@Input的组件管理，您只需将这些数据放入其中：

@Output

然后在您的AppComponent模板中

import { Component } from '@angular/core';
// The other imports are not necessary

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent
{
   // declare those stuffs
   title: string;
   note:  string;

   constructor()
   {
        this.title = "";
        this.note  = "";
   }
}

其中AppComponent <div class="container"> <app-input [title]="title" [note]="note" // you should return $event always or else it will return undefined (onTitleChange)="title = $event" (onModelChange)="note = $event"> </app-input> <app-notes [title]="title" [note]="note"> </app-notes> </div>且[ ]来自组件<{1}}

所以您的@Input会：

( )

其中@Output是您收到的数据，InputComponent是您发送的数据。

并且您的// add these to your existing InputComponent import { Input, Output, EventEmitter } from "@angular/core"; export class InputComponent { @Input("title") title: string; @Input("note") note: string; @Output() onTitleChange = new EventEmitter(); @Output() onNoteChange = new EventEmitter(); }模板将是：

@Input

在模式发生变化时，@Ouput和InputComponent设置<div class="container" id="noteCreate"> <form id="titleInputForm"> <input type="text" name="title" [(ngModel)]="title" (ngModelChange)="onTitleChange.emit(title)"> <textarea name="note" rows="8" cols="80" [(ngModel)]="note" (ngModelChange)="onNoteChange.emit(note)"> </textarea> </form> </div>以触发[(ngModel)]。

在此示例中，您实际上可以将默认值从@Input设置为(ngModelChange)。

如果您在这些示例中正确理解@Output我不需要放置AppComponent内的内容

希望有所帮助。

如何在组件

1 个答案: