Question

我学习了Angular，当我按Enter方法getBookById被调用时，我有这个html代码可以工作

这是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);

  };


}

问题在于（值：字符串）始终为“”为空

这是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>

Answer 1

在使用formGroup时，您可以通过执行getBookById(bookGroup.value.title)获取值。因此您的输入应为：

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

在这种情况下，可能不需要反应式，但是在您学习时，这是一个很好的例子。我邀请您阅读Angular documentation，以了解其工作原理。

Answer 2

使用当前代码，您只需要像这样工作即可，请删除formControlName

<input type="text" placeholder="Title"  #box (keyup.enter)="getBookById(box.value)"> <p>{{value}}</p>

https://stackblitz.com/edit/angular-8dmmoe?file=src%2Fapp%2Fapp.component.html

我试图以其他形式复制，但仍然有效

https://stackblitz.com/edit/angular-material-form-egq3zd?file=app/my-form/my-form.component.ts

Answer 3

您可以使用(keyup.enter)="getBookById(box.value)"代替(keyup.enter)="getBookById($event.target.value)"

您的案子不需要使用被动表格。

Answer 4

如果在getBookById（）中添加console.log（），则会看到它实际上已通过。

此外，显示输入值的方式将无效，并且将始终显示为空白。将

更改为

您看不到TS函数的参数，因为该变量仅是函数已知的。在类中的函数外部创建一个变量，并在函数运行时为其分配值，然后您可以使用{{yourVariableName}}在html中查看它

在这里，我的控制台日志有效并打印出传递给该函数的值：

<div [formGroup]="reactiveForm">
  <input type="text" placeholder="Title" formControlName="title" #box (keyup.enter)="getBookById(box.value)">
</div>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngforms';

  reactiveForm = new FormGroup({
    title: new FormControl(''),
  });

  getBookById(value: string){
    console.log(value);
  }

}

Answer 5

在html文件中

<input type="tel" [(ngModel)]="Code1" (keyup)="keytab($event)" />

和ts文件中

  keytab(event) {
    event.target.value
  }

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

5 个答案: