Angular2 @Input() Array not being set

Question

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.

Change [tagList] = "result.tagList" to [tagList] = "result.tags". — cyr_x
– cyr_x, Commented Apr 5, 2019 at 3:21
@cyr-x my guy, you just saved me a lot of trouble. For that, I thank you, god bless. Post your answer and I will more than gladly accept. — Wasiim Ouro-sama
– Wasiim Ouro-sama, Commented Apr 5, 2019 at 3:28

cyr_x · Accepted Answer · 2019-04-05 03:31:42Z

1

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".

answered Apr 5, 2019 at 3:31

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 @Input() Array not being set

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related