无法使用两种方式绑定以正确格式显示数据答案

【问题标题】：Unable to show data in correct format using two way binding无法使用两种方式绑定以正确格式显示数据
【发布时间】：2018-08-19 14:15:32
【问题描述】：

我在这里有一个页面，其中有标题、段落、图片和其他一些数据。我从后端获取数据，该后端还包含一个具有不同属性的数组，这些属性将在其中引入数据。我需要根据属性在我的页面上显示该数据。这是我从后端获取的数据

{
  "result": {
    "slogan": "Majeed",
    "bannerImage": "data:image/png;base64,...",
    "schoolName": "JPSC",
    "schoolTenancyName": "JPSC",
    "logo": null,
    "city": "Harbel",
    "county": "Kakata",
    "district": "Kakata",
    "addressline": "319-Hadi Street, Alhamd COlony, Allama Iqbal Town",
    "profilePageContents": [{
        "id": "355156f4-3499-4883-846d-e41bed8a2765",
        "heading": "Yamaha",
        "paragraph": "Hello Guys this is ahsan nissar and this is my school profile page and you can",
        "image": "data:image/png;base64,...",
        "alignment": "Left"
      },
      {
        "id": "d06ce9a5-94a9-4433-adda-ed7efe93f5b2",
        "heading": "Hello friends",
        "paragraph": "I am Ahsan and this is my school. No one can enter here without permission.",
        "image": "data:image/png;base64,...",
        "alignment": "Left"
      }
    ]
  }

现在在页面中我需要以一种我将考虑property 的方式显示profilePageContents，并根据此属性我将在页面中显示我的图片和段落数据。如果段落包含在class="paraLeft" 中，则alignment=Left 条件将触发并显示段落数据。到目前为止，我能够以这种方式显示数据

但我想以正确的方式展示 pargrpah。你可以在图片中看到我得到了所有我不想要的段落。这是我的打字稿代码

publicData: GetPublicProfilePage = new GetPublicProfilePage();

active: boolean = false;
saving: boolean = false;

selectedFile: File;
image_size: boolean;
image_format: boolean;

dataa: {
  image: string,
  paragraph: string,
  heading: string
}

imageUrl: string;

data: string[];
align: string[];
para: string;
para2: string;
public base64textString: string;
constructor(
  injector: Injector,
  private router: Router,
  private _profileService: ProfileServiceProxy
) {
  super(injector);
}

ngOnInit() {
  this._profileService.GetPublicProfilePage('JPSC')
    .finally(() => {
      this.saving = false;
    })
    .subscribe((result: GetPublicProfilePage) => {
      this.publicData = result;
      this.data = this.publicData.profilePageContents.map(a => a.paragraph);
      this.align = this.publicData.profilePageContents.map(a => a.alignment);
      for (let i = 0; i < this.align.length; i++) {
        if (this.align[i] === 'Left') {
          for (let j = 0; j < this.data.length; j++) {
            if (document.getElementsByClassName('paraLeft')) {
              this.data[i] = this.para[i];
            }
          }
        }
      }
    })
}

我的 HTML 代码

<section>
  <div class="paraLeft">
    <div class="row clearfix">
      <div class="imgRight"><img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;"></div>
      <p>
        <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span><br>
        <br><br>{{data}}
      </p>
    </div>
  </div>
</section>
<section>
  <div class="paraRight">
    <div class="row clearfix">
      <div class="imgLeft">
        <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:left;width:400px;height:200px;">
      </div>
      <p>
        <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
        <br><br>{{data}}
      </p>
    </div>
  </div>
</section>
<section>
  <div class="paraLeft">
    <div class="row clearfix">
      <div class="imgRight">
        <img class="img-responsive" src="/assets/images/boss.png" alt="Smiley face" style="float:right;width:400px;height:200px;">
      </div>
      <p>
        <span align="left" style="float:left; font-size: 20px; font-weight: bold;">Information</span>
        <br><br>{{data}}
      </p>
    </div>
  </div>
</section>

我真的需要弄清楚这件事，如果有办法使用角度类绑定或使用 DOM 或任何东西来解决这个问题，请帮助我。

【问题讨论】：

看起来最简单的方法是将您的三个 {{data}} 插入替换为 HTML 中的 {{data[0]}}、{{data[1]}} 和 {{data[2]}} 中的每一个，因此您将获得其中一个每次都是数组元素而不是整个数组。（但不是单独硬编码每个部分，您应该将所有这些转换为 ngFor 循环......）
您期望的布局是什么？喜欢你上面展示的图片吗？
@DanielBeck 这是可能的，但这是不可接受的，因为我可能会从后端获得 5 或 6 个内容，所以我不能使用这种方式。
@Chybie 预期的布局是 `if(alignment =='Left') 第一个 paraLeft 类将触发，然后此段将添加到那里“大家好，这是 ahsan nissar，这是我的学校简介页面，你可以“
@ahsan，基本上，你不在乎是不是if(alignment =='Left')，对吧？你需要的是一左一右一左...

标签： html css angular typescript

【解决方案1】：

您的代码中的以下部分不是必需的：

this.data = this.publicData.profilePageContents.map(a => a.paragraph);
this.align = this.publicData.profilePageContents.map(a => a.alignment);
for (let i....

解决方案是：- 1.使用*ngFor循环的even或odd属性，就可以知道是分配类paraLeft还是paraRight。 https://angular.io/api/common/NgForOf 2.使用flexbox左右对齐

以下是示例解决方案：https://stackblitz.com/edit/so-list

【讨论】：