时间戳

首页 > 解决方案 > 如何从输入框获取值到Angular中的方法

angular - 如何从输入框获取值到Angular中的方法

问题描述

我学习了 Angular，我有这个 html 代码，当我按下回车键时，该方法getBookById被调用

这是 search-books.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

import { BookService } from '../Services/book.service'
import { BookItem } from '../Services/BookItem';

@Component({
  selector: 'app-add-contact',
  templateUrl: './search-books.component.html',
  styleUrls: ['./search-books.component.scss']

})

export class SearchBooksComponent {
  public name: string;
  public type: number;
  public number: number;

  private formBuilder: FormBuilder;
  private location: Location;

  bookItems: BookItem[];
  public bookGroup = new FormGroup({
        title: new FormControl(''),
        author: new FormControl(''),
        genre: new FormControl(''),
        price: new FormControl(''),
      });
  constructor(private bookService: BookService) {

  }

  /** GET all books from server. */
  getBookItems() {
    this.bookService.getBookItems().subscribe(bookItems => this.bookItems = bookItems);
  };

  /** GET book by id from server. */
  getBookById(value: string) {
    this.bookService.getBookItem(value).subscribe(bookItems => this.bookItems = bookItems);

  };


}

问题是 (value: string) 总是 "" 空

这是 search-books.component.html

   <mat-card class="form-container" >
  <mat-card-header><mat-card-title>Search for books</mat-card-title></mat-card-header>
  <form [formGroup]="bookGroup" class="form-container">

    <mat-form-field>
      <input type="text" matInput placeholder="Title"  formControlName="title" #box (keyup.enter)="getBookById(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Author" formControlName="author" #box (keyup.enter)="getAutor(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Genre" formControlName="genre" #box (keyup.enter)="getGenre(box.value)"> <p>{{value}}</p>
    </mat-form-field>

    <mat-form-field>
      <input type="text" matInput placeholder="Price" formControlName="price" #box (keyup.enter)="getPrice(box.value)"> <p>{{value}}</p>
    </mat-form-field>

  </form>

</mat-card>



<mat-card *ngFor="let book of bookItems">

  <mat-card-header >
    <mat-card-title>{{book.title | titlecase}}</mat-card-title>
    <mat-card-subtitle>{{book.description}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.author}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.genre}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.publish_date}}</mat-card-subtitle>
    <mat-card-subtitle>{{book.price}}</mat-card-subtitle>

  </mat-card-header>

</mat-card>

标签： angularangular-materialangular-reactive-forms

解决方案

当您使用formGroup时，您可以通过这样做来获得价值getBookById(bookGroup.value.title)。所以你的输入应该是：

<input type="text" 
  matInput
  placeholder="Title" 
  formControlName="title"
  (keyup.enter)="getBookById(bookGroup.value.title)">

在这种情况下，响应式表单可能不是必需的，但在您学习的过程中，这是一个很好的例子。我邀请您阅读Angular 文档以了解它是如何工作的。

推荐阅读