Question

首先，让我通过说一些地方可能已经回答过的问题作为开始，但是我无法找出如何准确描述我要实现的目标，至少不能用任何具有匹配性的措辞来描述结果。

这是一个堆叠闪电战：https://stackblitz.com/edit/angular-gvgj4s

我正在尝试构建一个组件，该组件允许用户添加特殊需求服务并在其中添加注释。每个服务都在ngFor的帮助下列出并显示：grid，并包含一个“评论”按钮。

我试图说明我要在此图像上实现的目标：

一个重要的功能是，注释“弹出”应相对于按下的“注释”按钮放置。因此，我在ngFor循环中包含了一个ngTemplateOutlet。我遇到的问题是，当触发“评论”按钮时，所有内容都会在网格内移动

我尝试过在ngFor循环外使用div，该div可以工作，但是它的位置相对于单击按钮的位置相对。

谢谢！

Answer 1

This is what I have，然后添加position:relative和position:absolute；

相关的 HTML 更改后：

<section class="p-md green-border">
  <div class="common-ssrs">
    <div *ngFor="let service of commonSsrs" class="d-flex justify-content-between">

    <div class="d-flex align-items-center">{{service.code | uppercase}}</div>

      <div class="actions d-flex align-items-center">
        <button mat-mini-fab class="add-button" id="'wt-common-ssrs-add-' + service.code"><span class="font-title-1 add-text">+</span></button>
        <!-- Maybe change to button, to avoid marking when clicking -->
        <div class="mat-icon-container">
          <button (click)="editComment(service)" class="color-gray-2 cursor-pointer add-comment" id="'wt-common-ssrs-comment-' + service.code">comment</button>
        </div>        
      </div>
      <div *ngIf="serviceCommentEdit && serviceCommentEdit.id === service.id" class='commentComtainer'>
        <ng-container  *ngTemplateOutlet="EditSsrComment; context: { service: service, index: index}"></ng-container>
      </div>
    </div>
  </div>
</section>

<!-- <div *ngIf="serviceCommentEdit" class="add-comment-container p-md d-flex"> -->

  <ng-template let-service="service" let-serviceIndex="index" #EditSsrComment  >
      <div class="add-comment-container p-md d-flex">
        <textarea matInput></textarea>
        <br />
        <button class="d-flex align-self-end" (click)="closeEditComment()">clear</button>

      </div>
  </ng-template>
<!-- </div> -->

Answer 2

请尝试以下操作：

.common-ssrs > div {
  position: relative;
  flex-wrap: wrap;
}
.common-ssrs > div > div:not(.d-flex) {
  width: 100%;
}
.common-ssrs > div > div:not(.actions) .add-comment-container {
  position: absolute;
  left: 0;
  top: 100%;
  width:100%;
}

Answer 3

幸运的是，有一个插件可以执行您要归档的文件！它称为X-Editable，并且与Angular兼容。请参见http://vitalets.github.io/angular-xeditable/#textarea，以获取有关textarea编辑器的文档（作为就地“弹出窗口”）

您可以在JSFiddle here上看到此插件的简单演示。这就是您所需的所有HTML，以及一些JS：

<a href="#" editable-textarea="user.desc" e-rows="7" e-cols="40">
    <pre>{{ user.desc || 'no description' }}</pre>
</a>

Answer 4

摆脱position: relative;并改用flex order: X：

Changed Stackblitz

HTML代码：

<section class="p-md green-border">
  <div class="common-ssrs">
    <div *ngFor="let service of commonSsrs" class="d-flex justify-content-between">

    <div class="d-flex align-items-center column-1">{{service.code | uppercase}}</div>

      <div class="actions d-flex align-items-center column-3">
        <button mat-mini-fab class="add-button" ><span class="font-title-1 add-text">+</span></button>
        <!-- Maybe change to button, to avoid marking when clicking -->
        <div class="mat-icon-container">
          <button (click)="editComment(service)" class="color-gray-2 cursor-pointer add-comment">comment</button>
        </div>        
      </div>
      <div class="column-2" *ngIf="serviceCommentEdit && serviceCommentEdit.id === service.id">
        <ng-container  *ngTemplateOutlet="EditSsrComment; context: { service: service, index: index}"></ng-container>
      </div>
    </div>
  </div>
</section>

  <ng-template let-service="service" let-serviceIndex="index" #EditSsrComment>
    <div class="add-comment-container p-md d-flex">
      <button class="d-flex align-self-end" (click)="closeEditComment()">close</button>
      <textarea matInput></textarea>
    </div>
  </ng-template>

CSS代码：

.column-1 {
  order: 1;
}

.column-2 {
  order: 2;
}

.column-3 {
  order: 3;
}

角度：使元素显示在顶部并相对于按钮

4 个答案: