AngularJS 和 JSON 与多行字符串答案

【问题标题】：AngularJS and JSON with multiline stringAngularJS 和 JSON 与多行字符串
【发布时间】：2016-09-18 12:02:04
【问题描述】：

我已将我的数据组织在 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>

我的输出如下所示：

["Some long text 1","Some long text 2"]

如何删除（或过滤）字符 '[' 、 '"' 和 ','？

或者如果我使用 ng-bind-html="rule.description" 指令我得到：

Some long text 1 ,Some long text 2

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

【问题讨论】：

标签： javascript angularjs json ionic-framework

【解决方案1】：

你也可以试试 Array.join() 方法。

链接：Array.join()

在您的情况下：{{ rule.description.join(' ') }}

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这也让我很伤心。但是我用自定义管道解决了它。研究制作管道，但这应该会有所帮助：

管道/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 {}

然后，（对我而言）您可以以类似的方式获取所有数据，即使也使用翻译管道：

  <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"]
  } 
}

希望对你有帮助

【讨论】：