Question

链接到完整项目：

https://www.dropbox.com/s/kg9e7e2ce5j6bjd/WorkingProject.zip?dl=0

现在看起来的截图：

在屏幕截图中只显示了一个项目，但如果向下滚动，每个项目的价格相同，我想更改代码，以便它是一个不同的随机数（我正在使用math.random（））列表中的每个项目。

我无法弄清楚如何获得：

每件商品的随机数价格
作为每个项目的随机数的可用性
数量作为每个项目的随机数
图片作为附加到用户输入的谷歌搜索（无论他们在搜索栏中输入什么内容）
链接到出价页面以保持变量一致

完整的HTML代码（wiki.component.ts）：

import { Component }        from 'angular2/core';
import { JSONP_PROVIDERS }  from 'angular2/http';
import { Observable }       from 'rxjs';
import { WikipediaService } from './wikipedia.service';
import {Router, RouteParams, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'Wikithing',
  template: `
    <h1>Search and Display Page</h1>
    <p><i>Fetches after each keystroke</i></p>
    <input #term (keyup)="search(term.value)"/>
    <ul>
     <li *ngFor="#item of items | async">{{item}} <br> <p> 

      </p> Price (in USD): $ {{Prices}}
       <br> <p> 

      </p> Availability: 24 hours <br> <p> 

      </p> Quantity currently in stock: {{quantity}}

       <br> <p> 

      </p> Image of item: <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
       <br> <p> 
       </p>
               <p>

            </p>
             <a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>
            <p>

                </p>
        <br> <p> 
       </li>
    </ul>
  `,
  providers:[JSONP_PROVIDERS, WikipediaService],
  directives: [ROUTER_DIRECTIVES, RouterLink],

})
export class WikiComponent {
  constructor (private wikipediaService: WikipediaService) {}
  items: Observable<string[]>;
  quantity = Math.random() * 100;
  Prices = Math.random() * 1000;
  image = 0;
  search (term: string) {
    this.items = this.wikipediaService.search(term);
    var Prices = Math.random() + Math.random();
    var quantity = Math.random();
  }
}

Answer 1

由于你已经在这里使用Observables，我会尝试以反应的方式解决这个问题。这意味着您可以将来自WikipediaService的响应转换为您想要的响应。目前您的items类型为Observable<string[]>，但实际需要的是数组ob对象，因为您要添加quantity或prices等属性。因此，您可以执行以下操作来转换您的响应：

this.items
  .map((items) => items.map(() => ({
      name: item,
      price: Math.random(),
      quantity: Math.random()
      availability: Math.random()
      link: ...,
      image: ....
    })));

然后你得到一个对象数组，所以你必须相应地改变你的视图。例如

</p> Price (in USD): $ {{item.price}} <br> <p>

另外，请务必填写link和image以了解您的需求。因此，如果您希望链接是用户输入的内容，则必须创建表单控件并获取组件中的输入。另一种方法是在输入上使用[(ngModel)]将值保存在组件中的变量中。

有关表单的更多信息，请查看以下链接：

将变量和随机数附加到维基百科搜索栏

1 个答案: