Question

当尝试在有角度的CLI中构建项目时，出现此错误。我已经阅读了一些尝试过的内容，但是没有任何效果。错误是：

src \ app \ dropdown \ dropdown.component.html（8,12）中的
ERROR ::属性类型“ {”上不存在“名称”： } []'。 src \ app \ dropdown \ dropdown.component.html（34,6）：：属性'name'确实类型'{不存在，名称：字符串； } []'。 src \ app \ dropdown \ dropdown.component.html（8,12）：：属性'name'确实类型'{不存在，名称：字符串； } []'。 src \ app \ dropdown \ dropdown.component.html（8,45）：：属性'name'确实类型'{不存在，名称：字符串； } []'。

组件的HTML：

<div id="Header">
<h1>Welcome to  the BOV Solicitor info app!</h1>
</div>
<h3>Select a Municipality from the drop down box to display the information.</h3>
<hr>
<div id="Dropdown">  
  Select Municipality :  
  <select  [(ngModel)]="ProductHeader.name" (ngModelChange)="SearchProduct(ProductHeader.name)">  
       <option *ngFor="let prod of ProductHeader">{{prod.name}}</option>  
   </select> 
   <br>
   <br>
   <!--
       Code for future feature


<h3 style="color: red;">If you wish to view all records, click the button instead of making a selection in the drop down box.</h3>
   <div class="allrecords">
    <button class="btn btn-primary"  (click)="toggleChild()">Click to display all records</button>
    <div>
        <app-allrecords [showMePartially]="showVar"></app-allrecords>
    </div>
</div>

-->







</div>  
<div>  
<div *ngIf="ProductHeader.name">   
<h4>{{ProductHeader.name}} Details:</h4>  
<div>
<table class="table  table-dark table-hover table-bordered table-responsive-lg">  
    <tr >   
        <th>Attorney:</th> <th>Solicitor For:</th>  <th>Phone:</th> <th>Fax:</th>   <th>Address:</th>
    </tr>  

     <tr  *ngFor="let Prod of ProductDetails">  
        <td>{{Prod.Atty1}}</td>  
        <td>{{Prod.Affil1}}</td>  
        <td>{{Prod.Phone}}</td>  
        <td>{{Prod.Fax}}</td>  
        <td>{{Prod.Add}}</td>
    </tr>  
  <tr  *ngFor="let Prod of ProductDetails">  
     <td>{{Prod.Atty2}}</td>  
     <td>{{Prod.Affil2}}</td>  
     <td>{{Prod.Phone2}}</td>  
     <td>{{Prod.Fax2}}</td>  
     <td>{{Prod.Add2}}</td>
 </tr>


</table>
<h3>Please report any errors or outdated information <a href="mailto:joebarrett29@gmail.com?subject=Report&body=The following information needs changed:">here</a>.</h3>  
</div>

TS组件的代码：必须削减一些数据以满足堆栈溢出的输入限制

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

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent  {
  showVar: boolean = true;



    toggleChild(){
        this.showVar = !this.showVar;
    }

   //Create a object for storing filter data and bind to html table.
   public ProductDetails: object = [];  

   //filter product details on name and return productDetails object.
   public ProductHeader = [{ name: 'Alepo Twp' }, { name: 'Aspinwall Borough'}, { name: 'Avalon Borough' }, { name: 'Baldwin' },
   { name: 'Baldwin Twp' }, { name: 'Bell Acres Borough' }, { name: 'Bellevue Borough' }, { name: 'Ben Avon' }, 
   { name: 'Ben Avon Heights' }, { name: 'Bethel Park Borough' }, { name: 'Blawnox' }, { name: 'Brackenridge' },
   { name: 'Braddock Borough' }, { name: 'Braddock Hills' }, { name: 'Bradford Woods' }, { name: 'Brentwood Borough' },
   { name: 'Bridgeville' }, { name: 'Carnegie' }, { name: 'Castle Shannon' }, { name: 'Chalfant' }, { name: 'Cheswick' },
   { name: 'Churchill' }, { name: 'City of Duquesne' }, { name: 'City of McKeesport' }, { name: 'City of Pittsburgh' },
   { name: 'Clairton' }, { name: 'Collier Twp' }, { name: 'Coraopolis' }, { name: 'Crafton Borough' }, { name: 'Crescent' },
   { name: 'Dormont Borough' }, { name: 'Dravosburg' }, { name: 'East Deer Twp' }, { name: 'East Pittsburgh' }, { name: 'Edgewood' },
   { name: 'Edgeworth Borough' }, { name: 'Elizabeth' }, { name: 'Elizabeth Twp' }, { name: 'Emsworth Borough' },
   { name: 'Etna' }, { name: 'Fawn Twp' }, { name: 'Findlay Twp' }, { name: 'Forest Hills Borough' }, { name: 'Forward Twp' }, { name: 'Fox Chapel Borough'},
   { name: 'Frazer Twp' }, { name: 'Glassport' }, { name: 'Glenfield' }, { name: 'Greentree Borough' }, { name: 'Hampton Twp' },
   { name: 'Harmar Twp' }, { name: 'Harrison Twp' }, { name: 'Haysville' }, { name: 'Heidelberg' }, { name: 'Homestead Borough' },
   { name: 'Imperial Twp' }, { name: 'Indiana Twp' }, { name: 'Ingram' }, { name: 'Jefferson' }, { name: 'Kennedy Twp' },
   { name: 'Kilbuck Twp' }, { name: 'Leet Twp' }, { name: 'Leetsdale' }, { name: 'Liberty' }, { name: 'Lincoln' }, { name: 'Marshall Twp' },
   { name: 'McCandless Twp' }, { name: 'McDonald' }, { name: 'McKees Rocks' }, { name: 'Millvale' }, { name: 'Monroeville Borough' },
   { name: 'Moon Twp' }, { name: 'Mount Oliver' }, { name: 'Mt. Lebanon Twp' }, { name: 'Munhall Borough' }, { name: 'Neville Twp' },
   { name: 'North Braddock Borough' }, { name: 'North Fayette' }, { name: 'North Fayette Twp' }, { name: 'North Versailles' }, 
   { name: 'Oakdale' }, { name: 'Oakmont Borough' }, { name: "O'Hara Twp" }, { name: 'Ohio Twp' }, { name: 'Osborne' },
   { name: 'Penn Hills Twp' }, { name: 'Pennsbury' }, { name: 'Pine Twp' }, { name: 'Pitcarin Borough' }, { name: 'Pleasant Hills Borough' },
   { name: 'Plum' }, { name: 'Port Vue Borough' }, { name: 'Rankin' }, { name: 'Reserve Twp' }, { name: 'Richland Twp' }, { name: 'Robinson Twp' },
   { name: 'Ross Twp' }, { name: 'Rosslyn Farms' }, { name: 'Scott' }, { name: 'Sewickley Borough' }, { name: 'Sewickley Heights Borough' },
   { name: 'Sewickley Hills' }, { name: 'Shaler Twp' }, { name: 'Sharpsburg' }, { name: 'South Fayette' }, { name: 'South Park Twp' },
   { name: 'South Versailles' }, { name: 'Springdale' }, { name: 'Springdale Twp' }, { name: 'Stowe Twp' }, { name: 'Swissvale' },
   { name: 'Tarentum' }, { name: 'Thornburg' }, { name: 'Trafford' }, { name: 'Turtle Creek' }, { name: 'Upper St. Clair Twp' },
   { name: 'Verona' }, { name: 'Versailles' }, { name: 'Wall' }, { name: 'West Deer Twp' }, { name: 'West Elizabeth Twp' },
   { name: 'West Elizabeth Twp' }, { name: 'West Homestead' }, { name: 'West Mifflin Borough' }, { name: 'West View' },
   { name: 'Whitaker' }, { name: 'White Oak' }, { name: 'Whitehall' }, { name: 'Wilkins Twp' }, { name: 'Wilkinsburg Borough' },
   { name: 'Wilmerding Borough' }];  
   public Products = [  
    {Name:'Alepo Twp', Atty1: 'Harlan S. Stone, Esq.' , Atty2: 'John T. Vogel, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Quaker Valley)', Phone: '412-392-5295', Phone2: '412-594-5622',
    Fax: '412-392-5367', Fax2: '412-594-5619', Add: '2 PPG Place Ste 400, Pittsburgh, PA 15222', Add2: '1500 One PPG Place, Pittsburgh, PA 15222'},

    {Name:'Aspinwall Borough', Atty1: 'Stephen L. Korbel, Esq.' , Atty2: 'Paul Giuffre, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Fox Chapel)', Phone: '412-394-5627', Phone2: '412-781-7900',
     Fax: '412-586-1042', Fax2: '412-781-7901', Add: '603 Stanwix Street, 6th Floor, Pittsburgh, PA 15222', Add2: '221 Commercial Avenue, Suite 220, Pittsburgh, PA 15215'}, 

    {Name:'Avalon Borough', Atty1: 'Megan M. Turnbull, Esq.' , Atty2: 'Anthony Giglio, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Northgate)', Phone: '412-391-9890', Phone2: '412-243-9700',
     Fax: '412-391-9685', Fax2: '412-243-9660', Add: '445 Fort Pitt Blvd., Suite 503, Pittsburgh, PA 15219', Add2: '1500 Ardmore Blvd., Ste 506, Pittsburgh, PA 15221'},

    {Name:'Baldwin', Atty1: 'Stanley Lederman, Esq.' , Atty2: 'Ira Weiss, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Baldwin-Whitehall)', Phone: '412-261-5400', Phone2: '412-391-9890', 
    Fax: '412-281-0313', Fax2: '412-392-9685', Add: '428 Forbes Ave, Ste 302, Pittsburgh, PA 15219', Add2: '445 Fort Pitt Blvd., Suite 503, Pittsburgh, PA 15219'},

    {Name:'Baldwin Twp', Atty1: 'Romel L. Nicholas, Esq.' , Atty2: 'Ira Weiss, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Baldwin-Whitehall)', Phone: '412-391-6920', Phone2: '412-391-9890', 
    Fax: '412-391-1189', Fax2: '412-391-9685', Add: '519 Court Place, Pittsburgh, PA 15219', Add2: '445 Fort Pitt Blvd., Suite 503, Pittsburgh, PA 15219'},

    {Name:'Bell Acres Borough', Atty1: 'Robert Max Junker, Esq.' , Atty2: 'Patrick Clair, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Quaker Valley)', Phone: '412-394-5400', Phone2: '412-935-4777',
    Fax: '412-773-7862', Fax2: '412-935-4123', Add: '810 3rd Street, Beaver, PA 15009', Add2: '2100 Georgetown Dr, Suite 300, Sewickley, PA 15143'},

    {Name:'Bellevue Borough', Atty1: 'Thomas P. McDermott, Esq.' , Atty2: 'Anthony Giglio, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Northgate)', Phone: '412-391-6920', Phone2: '412-243-9700', 
    Fax: '412-391-1189', Fax2: '412-243-9660', Add: '519 Court Place, Pittsburgh, PA 15219', Add2: '1500 Ardmore Blvd., Suite 506, Pittsburgh, PA 15221'},

  {Name:'Ben Avon', Atty1: 'Anne Sweeney, Esq.' , Atty2: 'Anthony Giglio, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Avonworth)', Phone: '412-366-3533', Phone2: '412-243-9700', 
    Fax: '412-366-3334', Fax2: '412-243-9660', Add: '1004 McKnight Park Drive, Pittsburgh, PA 15237', Add2: '1500 Ardmore Blvd., Suite 506, Pittsburgh, PA 15221'},

  {Name:'Ben Avon Heights', Atty1: 'John T. Vogel, Esq.' , Atty2: 'Anthony Giglio, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Avonworth)', Phone: '412-594-5622', Phone2: '412-243-9700', 
    Fax: '412-594-5619', Fax2: '412-243-9660', Add: '1500 One PPG Place, Pittsburgh, PA 15222', Add2: '1500 Ardmore Blvd., Suite 506, Pittsburgh, PA 15221'},

  {Name:'Bethel Park Borough', Atty1: 'John T. Vogel, Esq.' , Atty2: 'Anthony Giglio, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Bethel Park)', Phone: '412-594-5622', Phone2: '412-243-9700', 
    Fax: '412-594-5619', Fax2: '412-243-9660', Add: '1500 One PPG Place, Pittsburgh, PA 15222', Add2: '1500 Ardmore Blvd., Suite 506, Pittsburgh, PA 15221'},

  {Name:'Blawnox', Atty1: 'John F. Cambest, Esq.' , Atty2: 'Paul Guiffre, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Fox Chapel)', Phone: '412-243-1600', Phone2: '412-781-7900', 
    Fax: '412-243-1643', Fax2: '412-781-7901', Add: '1900 Main Street, Suite 207, Canonsburg, PA 15317', Add2: '221 Commercial Ave, Suite 200, Pittsburgh, PA 15215'},

  {Name:'Brackenridge', Atty1: 'David P. Hivzdos, Esq.' , Atty2: 'Ira Weiss, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Highland)', Phone: '724-941-5400', Phone2: '412-391-9890', 
    Fax: '724-941-8455', Fax2: '412-391-9685', Add: '505 Valleybrook Road, McMurray, PA 15317', Add2: '445 Fort Pitt Blvd., Suite 503, Pittsburgh, PA 15219'},

    {Name:'Braddock Borough', Atty1: 'Falco Muscante, Esq.' , Atty2: 'John T. Vogel, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Woodland Hills)', Phone: '412-242-4400', Phone2: '412-594-5622', 
    Fax: '412-242-4377', Fax2: '412-594-5619', Add: '424 South 27th Street, Suite 210, Pittsburgh, PA 15203', Add2: '1500 One PPG Place, Pittsburgh, PA 15222'},

    {Name:'Braddock Hills', Atty1: 'Samuel P. Kamin, Esq.' , Atty2: 'John T. Vogel, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Woodland Hills)', Phone: '412-281-1119', Phone2: '412-594-5622', 
    Fax: '412-281-1121', Fax2: '412-594-5619', Add: '437 Grant Street, Suite 1806, Pittsburgh, PA 15219', Add2: '1500 One PPG Place, Pittsburgh, PA 15222'},

    {Name:'Bradford Woods', Atty1: 'Kate M. Diersen, Esq.' , Atty2: 'Alfred C. Maiello, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (North Allegheny)', Phone: '412-281-0587', Phone2: '412-242-4400', 
    Fax: '412-281-2971', Fax2: '412-242-4377', Add: '437 Grant Street, 14th Floor, Pittsburgh, PA 15219', Add2: '424 South 27th Street, Suite 210, Pittsburgh, PA 15203'},

    {Name:'Brentwood Borough', Atty1: 'Gavin A. Robb, Esq.' , Atty2: 'John T. Vogel, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Brentwood)', Phone: '412-594-5654', Phone2: '412-594-5622', 
    Fax: '412-594-5619', Fax2: '412-594-5619', Add: 'One PPG Place, Suite 1500, Pittsburgh, PA 15222', Add2: '1500 One PPG Place, Pittsburgh, PA 15222'},

    {Name:'Bridgeville', Atty1: 'Thomas P. McDermott, Esq.' , Atty2: 'Patrick Clair, Esq.', 
    Affil1: 'Municipality', Affil2: 'School District (Chartiers Valley)', Phone: '412-391-6920', Phone2: '412-935-4777', 
    Fax: '412-391-1189', Fax2: '412-935-4123', Add: '519 Court Place, Pittsburgh, PA 15219', Add2: '2100 Georgetown Dr, Suite 300, Sewickley, PA 15143'},







































    ]; 


   getProducts() {  
    console.log("getProducts");  
    return this.ProductHeader;  
}  


SearchProduct(name: string) {  

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





  constructor() { 
    this.getProducts();  
  }

  ngOnInit() {





}


}

Answer 1

该错误是由线路引起的

[(ngModel)]="ProductHeader.name" (ngModelChange)="SearchProduct(ProductHeader.name)"

在您的HTML中

，因为name值位于数组ProductHeader的每个成员内。您可以使用ProductHeader[i].name访问值，其中i是代表所需值索引的数字。

在这种情况下，您似乎不想更新name值，而只想选择一个。因此，我相信您可以为ngModel使用其他变量，该变量将在组件类中定义，例如：

[(ngModel)]="selectedProductName" (ngModelChange)="SearchProduct()"

您还需要更新以下行的<option>标记并添加[ngValue]="prod.name"。

注意：这将需要更新您的SearchProduct()函数，使其不使用任何输入，而应使用值this.selectedProductName。

Answer 2

问题在于在select中绑定到ngModel的数组。试试这个：

模板：


  <select  [(ngModel)]="selectedProduct?.name"  (ngModelChange)="SearchProduct(ProductHeader.name)">  
       <option *ngFor="let prod of ProductHeader">{{prod.name}}</option>  
   </select>

控制器


export class DropdownComponent  {
  ...
  public ProductHeader = [ ... ]
  public selectedProd = ProductHeader[0];
  ...

Answer 3

我找到了解决方案。无需添加--prod，只需运行build就可以顺利运行，并且程序可以正常运行。谢谢大家！

尝试以角度构建项目时出错

3 个答案: