Question

您好我正在尝试使用角度6构建项目，并且我正在获取类别的输入：Tag []从超级棒组件到catbar组件。从catbar开始，我试图将类别[0] .category和categories [0] .superCategory的字符串传递给feed组件。这是我遇到错误的地方，说它无法读取未定义的属性类别。我无法理解输入装饰器中的这个错误我明确地将其声明为@Input catgories：Tag []

PFA标记类的代码，catbar.html，catbar.ts和feed.ts :: Catbar - ＆gt;

export class CatbarComponent implements OnInit {

private  Catdomain = domain;
@Input() categories: Tag[]; 
//This input might have unfortunate timing

constructor() { }
ngOnInit() {
}
notifyme() {
  console.log('AM here');
}

}

catbar.html

<div style = "text-align: center">
<nav _ngcontent-c4="" class="navbar-category" style="height: auto">
<ul>
  <li *ngFor="let cat of categories" class="li-cat font-preadr cursor-pointer" >
    <div class="li-cat-circle">
       <img [ngClass]="{'li-cat-circle-img': !selectedCat || selectedCat.name !== cat.name, 'selected-cat-img': selectedCat && selectedCat.name === cat.name}"
          [src] = "Catdomain + cat.image"  [title]="cat.displayName">
   </div>
    <div class="li-cat-name" [title]="cat.displayName" [ngClass]="{'selected-cat-name': selectedCat && selectedCat.name === cat.name}">
      {{cat.displayName}}
    </div>
  </li>
</ul>
</nav>
</div>
<app-feed [sucat]="categories[0].superCategory" [cat]="categories[0].category"></app-feed>

feed.ts - ＆GT;

  @Input() cat :string; 
  @Input() sucat:string;

  private cards : Card[];
  private itemcount : number;
  private lastpage : number;
  constructor(private contentservice: ContentService) { }
  private page :number = 1;
  ngOnInit() {
    this.fetchdata(this.sucat,this.cat);//initial fetch  of data would require 3 default parameters

  }
  fetchdata(su :string,cat : string){
  this.contentservice.getcontentdata(su,cat,this.page)
  .subscribe((response) => {
    const data = new JsonData(response);
    this.cards = data.items;
    this.cards.forEach(el =>{
      console.log(el.title);
    })
    this.page++;
    });
  }
}

标记类 - ＆gt;

export class Tag {
   public category: string;
   public description: string;
   public displayName: string;
   public id?: number;
   public name?: string;
   public image?: string;
   public isLive?: boolean;
   public isLiveClient?: boolean;
   public level?: number;
   public shortDisplayName?: string;
   public superCategory?: string;
}

catgories数组从superbar中填充为

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

@ViewChild('child')
private child : CatbarComponent

  supercategories : Tag [] = [];
  allcategories : Tag[] = [];
  categories : Tag[] = [];
  tempCategories : Tag[] = [];
  selectedsu : Tag;

  constructor(private meta : MetadataService) {}
  //using meta data service to get supercategories
  ngOnInit() {
   this.meta.getmetadata().subscribe(response =>{
     //newCatJson requires an object type data
     //in earlier versions one needed to body.parse(), but since http returns an object
     //that no longer needs be done
     const data = new CatJson(response);
     this.supercategories =  data.superCat;
     this.selectedsu = this.supercategories[0];
     this.allcategories = data.allCat;
     this.allcategories.forEach(item => {
          if (this.supercategories[0].superCategory == item.superCategory)
              this.categories.push(item);
      })  
     });

    }

并输入catbar

<app-catbar #child [categories]="categories"></app-catbar>

Answer 1

使用ng-container＆amp; <ng-container *ngIf="categories[0]"> <app-feed [sucat]="categories[0].superCategory" [cat]="categories[0].category"></app-feed> </ng-container>适用于这种情况：

SELECT min(name) name,
       code,
       sum(quantity) quantity,
       min(storename) storename
       FROM elbat
       GROUP BY code;

错误TypeError：无法读取未定义的属性“类别”

1 个答案: