javascript - 所选的HTML不适用于Angular 6

我正在努力工作，

在我的模板中，枚举被硬编码为可能的值：

<div class="col-lg-9">
  <select id="content_type_select" name="content_type"  class="form-control multiselect-select-one" [(ngModel)]="selectedContent.contentType" data-fouc>
    <option [selected]="selectedContent.contentType===ContentType.Image" [value]="ContentType.Image">Image</option>
    <option [selected]="selectedContent.contentType===ContentType.Video" [value]="ContentType.Video">Video</option>
    <option [selected]="selectedContent.contentType===ContentType.Text"  [value]="ContentType.Text">Txt</option>
    <option [selected]="selectedContent.contentType===ContentType.HTML"  [value]="ContentType.HTML">HTML</option>
  </select>
</div>

在我的打字稿中，我正在将selectedContent发送到模板，并且已经在控制台中登录以检查我的selectedContent的值，它看起来像这样：


如您所见，当我console.log(this.selectedContent)时，有一个属性contentType的值为1，并且在我的下拉列表中应该选择了Image，但未正确选择任何内容。



但是，如果我写[selected]="true"，那么该选项就被选中了……为什么：/

谢谢你们

干杯

最佳答案

我认为您需要提供更多上下文（例如ContentType枚举的实现）。但是，让我为您提供此类问题的常见解答。

枚举不能仅在模板的类中自动导入而不能自动在模板上使用。假设你有一个像

export enum ContentType {
  Image = 1,
  Video = 2,
  Text = 3,
  HTML = 4
}

如果您需要从模板中使用它，则必须首先将其与一些公共可用的类属性相关联，例如public readonly contentType = ContentType，然后在模板代码上这样引用：

<select id="content_type_select" name="content_type"  class="form-control multiselect-select-one" [(ngModel)]="selectedContent.contentType" data-fouc>
    <option [selected]="selectedContent.contentType === contentType.Image" [value]="contentType.Image">Image</option>
    <option [selected]="selectedContent.contentType === contentType.Video" [value]="contentType.Video">Video</option>
    <option [selected]="selectedContent.contentType === contentType.Text"  [value]="contentType.Text">Txt</option>
    <option [selected]="selectedContent.contentType === contentType.HTML"  [value]="contentType.HTML">HTML</option>
  </select>

另外，使用身份运算符时，请注意JavaScript类型。 1 == "1"但1 !== '1'。

关于javascript - 所选的HTML不适用于Angular 6，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54846709/