Question

使用Angular 5，我创建了一个表单，用户可以从一个组件中选择项目，并希望将所选项目传递给另一个根据选择过滤Web请求的组件。

对于我正在使用的选择组件：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  .....
})
export class AppComponent implements OnInit{
  docs;
  selectedqr;

  constructor(public http: HttpClient) { }

  ngOnInit() {
    this.http.get("https://test.com/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID").subscribe(data => {
      this.docs = data['value'];
    });
  }

  select(ID){
    this.selectedqr = ID;
    console.log(this.selectedqr); //logs correctly
  }

}

对于过滤器组件：

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { QRCodeModule } from 'angularx-qrcode';

@Component({
  selector: 'app-print',
  .....
})
export class PrintComponent implements OnInit {
  @Input() qrcode;
  barcodeitems;

  constructor(public http: HttpClient){

  }

  ngOnInit(): void {
    this.http.get("https://test.com/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID&$filter=ID eq '"+ qrcode +"'").subscribe(data => {
      this.barcodeitems = data['value'];
    });
  }

}

如何在网络请求中使用@Input() qrcode作为参数？现在我收到错误Cannot find name 'qrcode'. Did you mean the instance member 'this.qrcode'?

Answer 1

我是上面提到的angularx-qrcode的作者。对不起，我的答案有点迟了，但是对于处理同样问题的人来说可能会有所帮助。

对于那些来到这里并使用angularx-qrcode-package的人，我为angular5 / 6准备了一个工作角度应用程序，供你克隆：

https://github.com/Cordobo/angularx-qrcode-sample-app

master-branch：发布angular6时的最新角度 angular5-branch：你猜对了，是为了angular5

没有设计（因此它非常丑陋），但您可能会发现代码很有用。

使用控制器中其他组件的数据

1 个答案: