CODEWITHSUNDEEP
angularangular2-templatetypescript2.0
Wasiim Ouro-sama
Wasiim Ouro-sama

Reputation: 131

Angular2 @Input() Array not being set

Trying to pass an array to a @Input() parameters but it's not displaying at all.

<ng-container *ngIf = "searchResults != undefined">
   <searchresult *ngFor = "let result of searchResults;" 
      [title] = 'result.title'
      [authorName] = 'result.authorName'
      [content] = 'result.content'
      [tagList] = "result.tagList"
   ></searchresult>
</ng-container>

<p *ngIf = "searchResults == undefined">loading...</p>

and then in searchresult I have 

<div class = "search-result">

<div class = 'result-top-section'>
    <div class = 'author-profile'>
         <img width = '70' height = '70' class = 'profile-icon' src= '/images/ogpfp.png'/>
         <p>{{ authorName }}</p>
    </div>
    <div class = 'content'>
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
    </div>
</div>

<div class = 'result-tag-row'>
        <tag *ngFor = "let tag of tagList;" [tagName] = 'tag'></tag>
</div>

this is the SearchResultComponent class

@Component({
 selector: 'searchresult',
 templateUrl: './searchResult.component.html',
 styleUrls: ['./searchResult.component.css']
})

export class SearchResultComponent implements ISearchResult{

 @Input()
 title: string;

 @Input()
 authorName: string;

 @Input()
 content: string;

 @Input()
 tagList: string[];
}

https://snag.gy/Nt4JIo.jpg this is the array, so as you can see the tag list is populated

https://snag.gy/SIX0Gs.jpg this is what the html outputs, as you can see every input property is set except for the tag list

I'm probably missing something here, if there's anything let me know. Thanks in advance.

Upvotes: 0

Views: 34

Answers (1)

cyr_x
cyr_x

Reputation: 14267

As stated in the comments, you made a typo (result.tagList instead of result.tags) when binding the tags list to the tagsList input of your searchresult component.

To fix the problem you have to change the binding to [tagList] = "result.tags".

Upvotes: 1

Related Questions