应该已经选择了第一个条目，并在页面加载时显示了它的内容，如何做到这一点？

Question

我已经创建了一个ngModel和ngchange，它绑定到ts文件中的json数组并显示其内容。

在加载页面时，应该已经选择了第一个条目，并显示了其内容。我希望在选择默认下拉值之前显示它，并显示它的内容。到目前为止，在加载时只有空白屏幕，当我选择下拉时，内容加载。

我只是尝试先显示默认内容，然后如果用户单击它，那么它应该会改变。

App.component.html

'''
<div>
    Select Product :
    <select [(ngModel)]="ProductHeader.name" (ngModelChange)="SearchProduct(ProductHeader.name)">
        <option *ngFor="let prod of ProductHeader">{{prod.name}} </option>
    </select>



    <div *ngIf="ProductHeader.name">
        <h5>You have selected: {{ProductHeader.name}} Product </h5>
    </div>
</div>
<div>
    <h4>Product Details:</h4>
    <table class="TFtable">
        <tr>
            <th>Name</th>
            <th>Store</th>
            <th>Price</th>
            <th>Model</th>
        </tr>
        <tr *ngFor="let Prod of ProductDetails">
            <td>{{Prod.title}}</td>
            <td>{{Prod.store}}</td>
            <td>{{Prod.price}}</td>
            <td>{{Prod.model}}</td>
        </tr>

'''

App.component.ts

'''

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-anya',
  templateUrl: './anya.component.html',
  styleUrls: ['./anya.component.css']
})
export class AnyaComponent implements OnInit {

  public ProductDetails: any = [];

  //filter product details on name and return productDetails object.

  public ProductHeader: any = 
[{ name: 'Hp' }, { name: 'Dell' }, { name: 'Lenovo' }];

  stringifiedData: any;
  data: any;
  stringData: any;
  parsedJson: any;

  ngOnInit() {

    this.stringifiedData = JSON.stringify(this.Products);
    console.log("With Stringify :", this.stringifiedData);

    // Parse from JSON  
    this.parsedJson = JSON.parse(this.stringifiedData);
    console.log("With Parsed JSON :", this.parsedJson);


  }



  public Products = [
    { Name: 'Hp', title: 'HP ENVY Laptop - 15t touch', price: '1099', store: 'Best Buy', model: '15-BS013DX' },
    { Name: 'Dell', title: 'Dell Laptop', price: '700', store: 'Amazon', model: 'I7378-3000SLV-PUS' },
    { Name: 'Lenovo', title: 'Lenovo Touch-Screen Laptop', price: '670', store: 'Target', model: '81A40025US' },
    { Name: 'Hp', title: 'HP OfficeJet Pro 6978 All-in-One Printer', price: '100', store: 'Target', model: 'T0F29A#B1H' },
    { Name: 'Hp', title: 'HP Laptop - 17t touch ', price: '420', store: 'Target', model: '1EZ78AV_1' },
    { Name: 'Dell', title: 'Dell - XPS 27" Touch-Screen All-In-One', price: '670', store: 'Target', model: 'BBY-311C3FX' },
    { Name: 'Dell', title: 'Dell - Inspiron 21.5" Touch-Screen All-In-One', price: '469.90', store: 'Target', model: 'I3265-A067BLK-PUS' },
    { Name: 'Lenovo', title: 'Lenovo - 520-24AST 23.8" Touch-Screen All-In-One', price: '679.99', store: 'Target', model: 'F0D3000EUS' },
    { Name: 'Dell', title: 'Dell - XPS 2-in-1 13.3" Touch-Screen Laptop', price: '1199.99', store: 'Target', model: 'XPS9365-7086SLV-PUS' }
  ];

  constructor() {

    this.getProducts();
  }
  getProducts() {
    console.log("getProducts");
    return this.ProductHeader;
  }
*Search products searches the name and displays the value*

  SearchProduct(name: string) {

    let obj = this.Products.filter(m => m.Name == name);
    this.ProductDetails = obj;
    return this.ProductDetails;
  }


}

**Do check how to select the  default dropdown value**

'''

Answer 1

对不起，为了使代码正常工作，我不得不稍微重构一下您的代码。

提示1

当您使用[(ngModel)]时，将它连接到一个独立的变量，您可以在其中读取和写入。我为此添加了selectedProductModel。当您现在选择一个ProductModel时，这个对象将被放入selectedProductModel中，然后您可以调用searchProduct()，而不需要提交任何进一步的值。

提示2

select中的选项必须有一个值才能使其工作。这就是我添加[ngValue]的原因。

这是您完善的HTML。

<div>
  Select Product :
  <select [(ngModel)]="selectedProductModel" (ngModelChange)="searchProduct()">
    <option *ngFor="let productModel of productModels" [ngValue]="productModel">{{productModel.name}}</option>
  </select>
  <div *ngIf="selectedProductModel && selectedProductModel.name.length > 0">
    <h5>You have selected: {{selectedProductModel.name}} Product </h5>
  </div>
</div>
<div>
  <h4>Product Details:</h4>
  <table class="TFtable">
    <tr>
      <th>Name</th>
      <th>Store</th>
      <th>Price</th>
      <th>Model</th>
    </tr>
    <tr *ngFor="let prod of productDetails">
      <td>{{prod.title}}</td>
      <td>{{prod.store}}</td>
      <td>{{prod.price}}</td>
      <td>{{prod.model}}</td>
    </tr>
  </table>
</div>

TS

提示3

类以大写字母开头，但变量总是以小写字母开头。对于任何方法也是如此，它们总是以小写字母开头。而且，即使是void，它们也应该始终有一个赋值的返回值。

提示4

尝试定义一个您可以使用的模型。当您尝试访问不存在的字段时，TypeScript可以通过这种方式警告您。

这是您重构的TS-文件。

import { Component, Input, OnInit } from '@angular/core';

// an object that represents a product detail.
class ProductDetails {
  constructor(
    public name: string,
    public title: string,
    public price: string,
    public store: string,
    public model: string
  ) {
  }
}

// an object that represents the product model
class ProductModel {
  constructor(
    public name: string
  ) {
  }
}

@Component({
  selector: 'app-anya',
  templateUrl: './anya.component.html',
  styleUrls: ['./anya.component.css']
})
export class AnyaComponent implements OnInit {

  // a list of product models
  public productModels: Array<ProductModel> = [
    new ProductModel('Hp'),
    new ProductModel('Dell'),
    new ProductModel('Lenovo')];

  // the currently selected product model. 
  // It is preset with the first product model of the list.
  selectedProductModel = this.productModels[0];

  // the list of product details. It gets filled by the `searchProduct()` method.
  productDetails: any[] = [];

  stringifiedData: any;
  data: any;
  stringData: any;
  parsedJson: any;

  // your list of product details
  public products = [
    new ProductDetails('Hp', 'HP ENVY Laptop - 15t touch', '1099', 'Best Buy', '15-BS013DX'),
    new ProductDetails('Dell', 'Dell Laptop', '700', 'Amazon', 'I7378-3000SLV-PUS'),
    new ProductDetails('Lenovo', 'Lenovo Touch-Screen Laptop', '670', 'Target', '81A40025US'),
    new ProductDetails('Hp', 'HP OfficeJet Pro 6978 All-in-One Printer', '100', 'Target', 'T0F29A#B1H'),
    new ProductDetails('Hp', 'HP Laptop - 17t touch ', '420', 'Target', '1EZ78AV_1'),
    new ProductDetails('Dell', 'Dell - XPS 27" Touch-Screen All-In-One', '670', 'Target', 'BBY-311C3FX'),
    new ProductDetails('Dell', 'Dell - Inspiron 21.5" Touch-Screen All-In-One', '469.90', 'Target', 'I3265-A067BLK-PUS'),
    new ProductDetails('Lenovo', 'Lenovo - 520-24AST 23.8" Touch-Screen All-In-One', '679.99', 'Target', 'F0D3000EUS'),
    new ProductDetails('Dell', 'Dell - XPS 2-in-1 13.3" Touch-Screen Laptop', '1199.99', 'Target', 'XPS9365-7086SLV-PUS')
  ];

  constructor() {
  }

  ngOnInit(): void {
    this.stringifiedData = JSON.stringify(this.products);
    console.log('With Stringify :', this.stringifiedData);

    // Parse from JSON
    this.parsedJson = JSON.parse(this.stringifiedData);
    console.log('With Parsed JSON :', this.parsedJson);

    // fire the search method. As productDetails is already preset with the 
    // first product model, your drowpdown has a selection and the result is shown.
    // this is what you were looking for.
    this.searchProduct();
  }

  searchProduct(): void {
    this.productDetails = this.products.filter(productDetail => productDetail.name === this.selectedProductModel.name);
  }

}