Javascript 带有多行字符串的AngularJS和JSON

我将数据组织在JSON文件中，该文件包含多行字符串，在数组中分隔。 像这样：

[
    {
        "name": "1. Some Name",
        "id": "1",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
       ]
    },
    {
        "name": "2. Some Name",
        "id": "2",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
        ]
    }
]

然后在我的视图中，我希望在描述中显示文本：

<ion-view view-title="">
<ion-content>
    <div class="card">
        <div class="item item-text-wrap" 
             ng-repeat="rule in rules | filter: { id: whichid }">
            {{ rule.description }}
        </div>
    </div>
</ion-content>

如何删除（或过滤）字符“[”、“”和“，”

或者如果我使用我得到的ng bind html=“rule.description”指令：

Some long text 1 ,Some long text 2

基本上这是很好的输出，但是它们包含一个逗号“，”（在数组中）。

像这样尝试

 <div class="item item-text-wrap" 
         ng-repeat="rule in rules | filter: { id: whichid }">
        <span ng-repeat="d in rule.description">{{ d }}</span>
    </div>

{{d}

您也可以尝试Array.join（）方法

链接：

---

在你的例子中：{{rule.description.join（''）}

这也给了我很多痛苦。但是我用一个自定义管道解决了它。 对制作管道进行研究，但这应有助于：

管道/arraytextfix/arraytextfix.ts（管道文件）：

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the ArraytextfixPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'arraytextfix',
})

export class ArraytextfixPipe implements PipeTransform {
  /**
   * This is a very important pipe, as it removes a joining
   * comma, as outlined on this page: https://stackoverflow.com/questions/39557436/angularjs-and-json-with-multiline-string
   */


  transform(value) { 
    value = value.join(' ');     
    return value
  } 
}

另一件重要的事情是，将管道文件添加到需要使用它的文件模块中

例如：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProjectsPage } from './projects'; 
import { TranslateModule } from '@ngx-translate/core'; // For translations to work
import { ArraytextfixPipe } from "../../pipes/arraytextfix/arraytextfix" // ADD THIS

@NgModule({
  declarations: [
    ProjectsPage,
    ArraytextfixPipe // ADD THIS
  ],
  imports: [

    TranslateModule, // For translations to work
    IonicPageModule.forChild(ProjectsPage),
  ],
})
export class ProjectsPageModule {}

然后，（对我来说）您可以以类似的方式处理所有数据，甚至还可以使用translate管道：

  <p [innerHTML]="'PROJECTS.BODY' | translate | arraytextfix"></p>

这基本上就是我的i18n/en.json数据提要：

{
"PROJECTS": 
  {
    "HEADING": "Projects",
    "DESCRIPTION": "A default description",
    "BODY": ["bodytext line 1 <p>even has support for a paragraph</p>",
    "<p>Works well on line 2</p>",
    "line 3"]
  } 
}

{
“项目”：
{
“标题”：“项目”，
“说明”：“默认说明”，
“BODY”：[“bodytext第1行甚至支持段落”，
“在第2行运行良好”
“，
“第3行”]
} 
}

我希望这会有点帮助

{
"PROJECTS": 
  {
    "HEADING": "Projects",
    "DESCRIPTION": "A default description",
    "BODY": ["bodytext line 1 <p>even has support for a paragraph</p>",
    "<p>Works well on line 2</p>",
    "line 3"]
  } 
}