如何区分存储在Firebase上的文本和ImageUrl？

Question

我将文本和ImageUrl存储在Firebase上的数组中。然后，我的代码应该随机获取数据之一（text和imageUrl）。它实际上是将文本用作数据。但我还需要添加图片网址（图片存储在Uploadcare上）。代码需要读取数据，并且如果它是图像URL（https://...。），则必须显示图像。我需要编写一个“ if”条件，但我的问题更多是关于如何在html部分中对其进行管理。根据结果​​（图像URL或文本）必须使用

或。

private getRandom() {
    let rand1 = Math.floor(Math.random() * this.cat1.words.length);


    let wordCat1 = this.cat1.words[rand1];

    var re = /https/gi; 
    if (wordCat1.search(re) == -1 ) { 
      console.log("Data 1 does not contain Image URL" ); 
    } else { 
      console.log("Data 1 contains ImageUrl" ); 
    } 

    return [wordCat1];
}

Answer 1

我相信您可以通过采用bool变量并使用Angular的*ngIf在HTML文件中使用它来实现此目的。

XYZ.ts文件=>

isImageURL: boolean

private getRandom() {
    let rand1 = Math.floor(Math.random() * this.cat1.words.length);


    let wordCat1 = this.cat1.words[rand1];

    var re = /https/gi; 
    if (wordCat1.search(re) == -1 ) { 
      console.log("Data 1 does not contain Image URL" ); 
      isImageURL = false;
    } else { 
      console.log("Data 1 contains ImageUrl" ); 
      isImageURL = true;
    } 

    return [wordCat1];
}

现在，您有了bool值，可以在HTML中使用它并填充您想填充的任何数据

XYZ.html =>

<!-- This div checks if the URL is true or false and populates data for true value only -->
<div *ngIf='isImageURL'>
   <!-- Your content -->
<div>

<!-- This div checks if the URL is true or false and populates data for false value only -->
<div *ngIf='!isImageURL'>
   <!-- Your content -->
<div>

我确定这就是您想要的。让我知道您是否还有其他评论。谢谢：）