如何在 HTML 属性中使用条件？

Question

当用户单击 Angular 中的按钮时，我正在新的 window 中加载图像。 我打开的弹出窗口包含 HTML。

Angular HTML：

<button class="btn btn-primary" type="button" (click)="openDocument(doc)"> View </button>

TS：

openDocument(doc) {
    doc.uploadedDocUrl = "https://beta.lottoweaver.com/WeaverDoc/commonContent/www.nationallottery.co.za/playerDocument/408441_ID_PROOF_null_1616082462069.pdf"

    let str = `<embed src=${doc.uploadedDocUrl} width='100%' height="100%">`;
    
    this.OpenWindow = window.open('', '', 'width=900, height=600, left=200, top=100');
    this.OpenWindow.document.write(`<body onload="checkIfPdf(${doc.uploadedDocUrl})">${str}</body>
    <script>
    function checkIfPdf(doc) {
      if(doc.endsWith(".pdf")) {
        console.log("is pdf")
      } else {
        console.log("is not pdf")
     }
    }
    </script>
    `);
    this.OpenWindow.document.close();
  }

如果 doc 文件以“.pdf”结尾，我希望将 width 和 height 属性保持为100% ，否则我想将 width 和 height 属性保持为auto 。

这个条件怎么写？

工作 stackblitz= https://stackblitz.com/edit/angular-ivy-ns536z

Answer 1

我不知道 angular 但是。 你的代码就像

 <script>
   function checkIfPdf(doc) {
   if(doc.endsWith(".pdf")) {
   console.log("is pdf")
   } else {
   console.log("is not pdf")
   }
   }
   </script>
  `);
   this.OpenWindow.document.close();
you may check with 

   <script>
  function checkIfPdf(doc) {
   if(doc.endsWith(".pdf")) {
   console.log("is pdf")
   } else {
   console.log("is not pdf")
   }
   }
  `);
   this.OpenWindow.document.close();
  </script>

Answer 2

您可以在 ts 文件中定义另一个 function 调用它来分配let str = this.pdfchecker(url)的值

pdfchecker 看起来像这样：

pdfchecker(url){
    
const last = url.split('.');
if(last[last.length -1] == 'pdf'){
    let str = //value of str
    return str
}else{
    let str = //other value of str
    return str
 }
}

Answer 3

你必须使用嵌套的 if

它可能像这样 go

if (condition a) 
{
    do action 1
} else 
{
   if (condition b) 
   {
     do action 2
   } 
   else 
   {
     ... etc.
   }
}

如何在 HTML 属性中使用条件？

问题描述

3 个解决方案

解决方案1
1 2021-03-30 05:51:55

解决方案2
1 已采纳 2021-03-30 05:52:55

解决方案3
-2 2021-03-30 05:36:33

如何在 HTML 属性中使用条件？

问题描述

3 个解决方案

解决方案1 1 2021-03-30 05:51:55

解决方案2 1 已采纳 2021-03-30 05:52:55

解决方案3 -2 2021-03-30 05:36:33

解决方案1
1 2021-03-30 05:51:55

解决方案2
1 已采纳 2021-03-30 05:52:55

解决方案3
-2 2021-03-30 05:36:33