小编ang*_*eUr的帖子

目标：我想要一个下拉列表，如果有人的可用性为真，则显示绿色，红色表示有人的可用性为假。

注意：我需要在没有 jQuery 的情况下完成（我刚刚被告知我们不允许在我们的项目中使用 jquery）。

问题/背景：我可以显示任何内容的唯一方法是使用 CSS 并将其放在下拉列表本身，如史密斯教授这张图片的第一行所示。您将看到琼斯教授的下一行在下拉列表中显示来自数据库的实际布尔值，尽管我想要一个彩色圆圈。

我希望它位于下拉框中。如果他们进行更改，它也应该（最终）能够更新数据库中的值。

如何让这些圆圈显示在下拉框中？

我希望它的下拉菜单看起来像：

它实际上是什么样子：

我所做的：

• 在 DropdownList 以及 ListItem 和 listitem 内部尝试了 CSS。

• 我也尝试过 SVG，但根本没有插入 ListItem

• 我试过通过 C# 代码添加 CSS，但无法让它以这种方式工作

CSS :

.dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}

.greendot {
    background-color: #89C742;
}

.reddot {
    background-color: #fe0505;
}

aspx/html：

<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
    <asp:ListItem ID="LT1"></asp:ListItem>
    <asp:ListItem ID="RT1"></asp:ListItem>              
</asp:DropdownList>

<asp:DropdownList runat="server" id="ddl2">
    <asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>

C#：

LT2.Text = professorStatsList[1].Available.ToString();

我有一个 div，当用户将鼠标悬停在 mat-grid-tile 上时显示内容。

我希望它足够大以显示其所有内容，但是这种情况没有发生，因为它似乎被限制在垫子网格图块内。

悬停之前的样子：

悬停时的样子：

我希望它看起来像什么：

HTML：

<mat-grid-tile *ngFor="let quickPhrase of phrases.QuickPhraseList ; let i = index" [attr.data-index]="i"
                                   [ngClass]="{'selected':phraseSelected === quickPhrase.Phrase}"  >
                        <div class="phrase-box">
                            <p>{{quickPhrase.PhraseTitle != null ? quickPhrase.PhraseTitle.substring(0,25) : "Add Title"}}</p>
                            <span>
                                <p class="hover-phrase-title"><strong>Title:</strong><br>{{quickPhrase.PhraseTitle}}</p>
                                <p class="hover-phrase-content"><strong>Quick Phrase:</strong><br>{{quickPhrase.Phrase}}</p>
                            </span>
                        </div>
                        <mat-icon *ngIf="false" mat-list-icon dndHandle>
                            drag_handle
                        </mat-icon>
                    </mat-grid-tile>

CSS：

  .phrase-box {
    width: 100%;
    position: relative;
    margin: 0px;
    cursor: pointer;
    
  }
  
  span { display: none; }
  
  .phrase-box:hover > span {
    width: 84%;
    display: inline-block;
    position: absolute;
    top: -100px; …

目标/背景：我需要将一个变量的值从我的 Angular 应用程序发送到页面上 iFrame 内的 ChatServer（aspx 和 javascript）。它在不同的服务器上。

我尝试过的：我正在遵循以下解决方法：https : //stackoverflow.com/a/25098153/11187561

但是，我收到错误消息：HTMLElement 类型上不存在属性“contentWindow”

我接下来还尝试了什么：通过 SO，我发现/sf/answers/2692052051/

我将它放在 ngAfterViewInit 中，但仍然出现错误。

代码：

ngAfterViewInit() {
    var frame = document.getElementById('your-frame-id');
    frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 
}