Question

我在这里DemoPage有一个演示页面我正在尝试创建一个这样的人。由于此页面可编辑，因此将从后端获取动态数据。因此，我在这里创建的是此页面CreatedPage。每个段落上方的标题必须在左侧，而每次迭代时该段落和图片都将反转。我无法在每个段落的左侧固定标题。我有一个对齐属性，根据它与每次迭代的每一行都被反转，为此，我使用了类绑定。同样现在该段不符合图片。这对我来说变得非常困难。如何确保标题保持在左侧，同时确保段落和图片保持内联并在每次迭代中保持反转？请检查该stackblitz网站PageCreated

上的代码

Answer 1

我认为您只是不想嵌套标题？试试这个：

<h1>App Comp</h1>
<section>
  <div *ngFor="let item of data; even as isLeft" >
    <h4>{{ item.heading }}</h4>
    <div class="card-item" [class.paraRight]="isLeft">
      <div class="image-container">
      <img [src]="item.image">
      </div>
      <div class="desc-container">
        <p>{{ item.paragraph }}</p>
      </div>
    </div>
  </div>
</section>

Answer 2

function noTags(vString) {
    return vString.replace(/<(.|\n)*?>/g, '');
}

更新了堆栈biltz https://stackblitz.com/edit/so-list-hqjqh5

，并在图像和参数之间留出空间

    <h1>App Comp</h1>
<div *ngFor="let item of data;even as isLeft">
      <h4>{{ item.heading }}</h4>      
    <section>
      <div class="card-item"  [class.paraRight]="isLeft">
    <div class="image-container">
      <img [src]="item.image">
    </div>
    <div class="desc-container">
      <p>{{ item.paragraph }}</p>
    </div>
  </div>  
</section>
</div>

无法将标题向左对齐

2 个答案: