Question

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

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

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

但是我想以正确的方式显示pargrpah。您可以在图片中看到我正在获取所有我不想要的段落。这是我的typeScript代码

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或其他任何方式解决此问题，

Answer 1

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

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

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

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

使用双向绑定无法以正确的格式显示数据

1 个答案: