Question

我有两个组件，一个订单列表和一个订单组件。当您单击订单列表中的订单ID时，订单组件将展开。我想用我的API中的数据进行扩展。见下文：

 <div class ="order" *ngFor="let order of orders">
     <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
     <app-order id="order-{{order.orderId}}" class="expandContainer"></app-order>
 </div>

订单组件：

 @Component({
   selector: 'app-order',
   templateUrl: './order.component.html',
   styleUrls: ['../../shared-styling/main.scss','./order.component.scss'],
   providers: [OrderService]
 })

export class OrderComponent implements OnInit {
 orderId: number;
 order: Order;
 errorMessage: string;

 constructor(
  private orderService: OrderService) {}

 ngOnInit(){
      this.orderService.getOrder(this.orderId)
        .subscribe( order => {
          this.order = order;},
          error => this.errorMessage = <any>error);
 }

现在这不起作用，但上面的代码基本上显示了我想要实现它的方式。当我点击orderId时，我想以某种方式将orderId从订单列表发送到订单组件。现在它扩展了列表并显示组件为空，我想在<app-order>能够传递orderId和onInit从我的服务获取数据。

我该怎么做？由于它是一个列表，因此每次点击新订单ID时都必须获得新订单。

Answer 1

在您的模板中

 <app-order [orderId]="order.orderId" class="expandContainer"</app-order>

在Component中使用输入属性

export class OrderComponent implements OnInit {
 @Input() orderId: number;
 order: Order;
 errorMessage: string;

 constructor(
  private orderService: OrderService) {}

 ngOnInit(){
      this.orderService.getOrder(this.orderId)
        .subscribe( order => {
          this.order = order;},
          error => this.errorMessage = <any>error);
 }

Answer 2

要获取组件中的@Input，您必须将其声明为import { Input } from '@angular/core'; @Component({ selector: 'app-order', templateUrl: './order.component.html', styleUrls: ['../../shared-styling/main.scss','./order.component.scss'], providers: [OrderService] }) export class OrderComponent implements OnInit { @Input() orderId: number; order: Order; errorMessage: string; constructor( private orderService: OrderService) {} ngOnInit(){ this.orderService.getOrder(this.orderId) .subscribe( order => { this.order = order; }, error => this.errorMessage = <any>error); } } }，如下所示：

<div class ="order" *ngFor="let order of orders">
    <span class="orderOrderId" (click)="showExpandedContent($event, order.orderId)">{{order.orderId}}</span>
    <app-order [orderId]="order.orderId" id="order-{{order.orderId}}" class="expandContainer"</app-order>
</div>

然后，你必须将它传递给组件，如下所示：

import gi
gi.require_version('Gtk','3.0')
from gi.repository import Gtk as gtk
import os

software_list = [("Firefox", 2002,  "C++"),
             ("Eclipse", 2004, "Java" ),
             ("Pitivi", 2004, "Python"),
             ("Netbeans", 1996, "Java"),
             ("Chrome", 2008, "C++"),
             ("Filezilla", 2001, "C++"),
             ("Bazaar", 2005, "Python"),
             ("Git", 2005, "C"),
             ("Linux Kernel", 1991, "C"),
             ("GCC", 1987, "C"),
             ("Frostwire", 2004, "Java")]

class WB_Window(gtk.Window):
     def __init__(self):
     gtk.Window.__init__(self, title="Write Blocker")
     self.set_border_width(10)
     self.set_position(gtk.WindowPosition.CENTER)
     self.set_default_size(1000, 450)

     self.outter_box = gtk.Box(gtk.Orientation.HORIZONTAL, spacing=10)
     self.outter_box.set_homogeneous(True)
     self.add(self.outter_box)

     grid = gtk.Grid()
     grid.set_row_spacing(10)
     grid.set_column_homogeneous(True)
     self.outter_box.add(grid)


    self.software_liststore = gtk.ListStore(str, int, str)
    for software_ref in software_list:
        self.software_liststore.append(list(software_ref))
    tree = gtk.TreeView(self.software_liststore)

    for i, column_title in enumerate(["Software", "Release Year", "Programming Language"]):
        renderer = gtk.CellRendererText()
        column = gtk.TreeViewColumn(column_title, renderer, text=i)
        tree.append_column(column)

    self.scrollable_treelist = gtk.ScrolledWindow()
    self.scrollable_treelist.set_vexpand(True)
    grid.add(self.scrollable_treelist)
    self.scrollable_treelist.add(tree)

    hbox = gtk.ButtonBox.new(gtk.Orientation.HORIZONTAL)
    hbox.set_homogeneous(True)
    valign = gtk.Alignment(xalign=1.0, yalign=1.0, xscale=1.0, yscale=1.0)
    hbox.pack_end(valign,False,False,0)
    grid_2 = gtk.Grid()

    grid.attach_next_to(grid_2,None,gtk.PositionType.BOTTOM,1,1)
    grid_2.add(hbox)


    button_mount = gtk.Button(label="Mount")
    hbox.add(button_mount)
    button_ro = gtk.Button(label="Read-Only")
    hbox.add(button_ro)
    button_rw = gtk.Button(label="Read-Write")
    hbox.add(button_rw)
    button_quit = gtk.Button(label="Quit",stock=gtk.STOCK_QUIT)
    button_quit.show()
    hbox.add(button_quit)

win = WB_Window()
win.connect("delete-event",gtk.main_quit)
win.show_all()
gtk.main()

将属性（id）传递给组件OnInit

2 个答案: