[Bug] *ngFor in span/formattedString

From @mikraus94 on November 15, 2016 13:29

Hi,

I’m trying to make *ngFor for span but without success.

It stacks texts under selfs

<Label *ngFor="let span of spans> <FormattedString> <Span [text]="span.text" [fontAttributes]="span.att"></Span> </FormattedString> </Label>

It doesn’t work for

<Label> <FormattedString *ngFor="let span of spans> <Span [text]="span.text" [fontAttributes]="span.att"></Span> </FormattedString> </Label>

or

<Label> <FormattedString> <Span *ngFor="let span of spans [text]="span.text" [fontAttributes]="span.att"></Span> </FormattedString> </Label>

It shows only first object from spans array.

Can you help me or this is bug?

Thank you

Copied from original issue: NativeScript/NativeScript#3099

[vakrilov]

Some updates:

• Doing <Label><FormattedString *ngFor="let span of spans"> ... will never work as label can have only a single FormattedString.
• Having multiple spans inside FormattedString is allowed, so <Span *ngFor="let span of spans" ... sounds reasonable. However, when having a structural directive (*ngFor) angular actually inserts a marker element to keep track of where to add and remove the items. This marker not a valid element to be inserted inside FormattedString, so probably this is the reason the code is not working.

You can create a simple pipe to overcome this issue:

@Pipe({ name: 'join' })
export class JoinPipe implements PipeTransform {
    transform(items: any[], field: string): any {
        if (field) {
            items = items.map(i => i[field]);
        }
        return items.join("");
    }
}

//.. and in the template:
<Label [text]="spans | join:'text'"></Label>

In a case you don’t actually need the styling of the different spans to be different - this will do the job.

[NathanWalker]

Just wanted to ping some curiosity here as well - just ran into this tonight 😦