here is my code, error happens in the @for line

<div>
        <ul>
            @for (paragraph of paragraphs; track paragraph) {
            <li>{{ paragraph }}</li>
            }
            @empty {
            <li>No items found</li>
            }
          </ul>
    </div>

Here is my service

paragraphs = {} as string[];

onInputUrlReturnParagraph(url: string) {
this.helloService.getPragraphsFromScraper(url).subscribe(
(paragraphs) => {
  this.paragraphs = paragraphs.split(" {Joined Point} ");
}
)

}

This is the error im getting

TypeError: newCollection[Symbol.iterator] is not a function
at reconcile (core.mjs:22571:68)
at Module.ɵɵrepeater (core.mjs:22933:9)
at HelloComponent_Template (hello.component.html:34:17)
at executeTemplate (core.mjs:11268:9)
at refreshView (core.mjs:12791:13)
at detectChangesInView$1 (core.mjs:13015:9)
at detectChangesInViewIfAttached (core.mjs:12978:5)
at detectChangesInComponent (core.mjs:12967:5)
at detectChangesInChildComponents (core.mjs:13028:9)
at refreshView (core.mjs:12841:13)

anybody face this issue? Thank you!