Question

我正在尝试从文本框中获取输入并将其传递给函数，我不断收到错误_co.randomCode不是函数。

只有刚开始使用Angular并尝试了几项不同的尝试，但仍受困于此。

app.component.html

<div class="form-group">
        <input #randomCode class="form-control landing-code-input" placeholder="123456">
</div>
<button (click)="get_screen(randomCode.value)" class="btn btn-lg btn-assign-to-tap">Assign</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private items : Item[] = [];
  title = 'site';
  randomCode = '';

  private itemsObservable : Observable<Item[]> ;

  constructor(private dataService: DataService) {

  this.dataService.get_screen(this.randomCode).subscribe((res : Item[])=>{
    this.items = res;
     console.log(res);
  });
  }
}

data.service.ts

export class DataService {

  apiUrl:string = "http://localhost/api/v1";
  constructor(private httpClient : HttpClient) {

   }

   get_screen(randomCode) {
     return this.httpClient.get(this.apiUrl + randomCode)
   }
}

Answer 1

在您的类中定义get_screen函数，然后将数据传递给服务函数“ this.dataService.get_screen”

// function inside AppComponent Class
getScreen(code) {
   this.dataService.get_screen(code).subscribe((res : Item[])=>{
      this.items = res;
   });
}

Answer 2

将按钮放在表单所在的div内

<div class="form-group">
        <input #randomCode class="form-control landing-code-input" placeholder="123456">
        <button (click)="get_screen(randomCode.value)" class="btn btn-lg btn-assign-to-tap">Assign</button>
</div>

Answer 3

最简单的方法是使用ngModel。 ngModel在Angular中用于双向绑定。也就是说，无论您输入什么内容，都可以在 .ts 类中进行访问。这就是您要实现的方式。

app.component.html

<div class="form-group">
        <input [(ngModel)]="randomCode" class="form-control landing-code-input" placeholder="123456">
</div>
<button (click)="get_screen()" class="btn btn-lg btn-assign-to-tap">Assign</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private items : Item[] = [];
  title = 'site';
  randomCode: string;

  private itemsObservable : Observable<Item[]> ;

  constructor(private dataService: DataService) {
  }

    get_screen() {
     this.dataService.get_screen(this.randomCode).subscribe((res : Item[])=>{
     this.items = res;
     console.log(res);
    });
  }
}

Angular 6-获取功能输入

3 个答案: