blocks|key|2413833|text|我建议在你的组件中定义一个字符串，这样你可以更好地控制你的逻辑。在组件中，将字符串设置为适当的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2413834|然后绑定到模板中的该字符串。|2413835|我这里没有你需要的所有逻辑，但像这样：|2413836|++isImage+=+false;

++get+statusText():+string+{
++++if+(!isProcessing())+{
++++++this.isImage+=+false;
++++++return+'Something1';
++++}+else+{
++++++this.isImage+=+true;
++++++return+'path+to+image';
++++}
++}|code-block|syntax|javascript|2413837|这使用了getter，它为组件属性提供了一种具有逻辑的方法。|2413838|然后只需绑定到模板中的statusText。|offset|length|style|CODE|2413839|<span+*ngIf='!isImage'>
++++++++{{statusText}}
</span>
<span+*ngIf='isImage>
++++<img+...>
</span>|2413840|entityMap^0|0|0|0|0|0|B|A|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@$O|12|P|13|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>I would suggest defining a string in your component, where you have much better control over your logic. In the component, set the string to the appropriate text.</p>

<p>Then bind to that string in the template.</p>

<p>I don't have all of your needed logic here, but something like this:</p>

<pre><code>  isImage = false;

  get statusText(): string {
    if (!isProcessing()) {
      this.isImage = false;
      return 'Something1';
    } else {
      this.isImage = true;
      return 'path to image';
    }
  }
</code></pre>

<p>This uses a getter, which provides a way for a component property to have logic.</p>

<p>Then just bind to <code>statusText</code> in the template.</p>

<pre><code>&lt;span *ngIf='!isImage'&gt;
        {{statusText}}
&lt;/span&gt;
&lt;span *ngIf='isImage&gt;
    &lt;img ...&gt;
&lt;/span&gt;
</code></pre>


blocks|key|2624435|text|<span+*ngIf="!isProcessing();+else+elseBlock">
++++++++Something1
</span>
<ng-container+#elseBlock+*ngIf="queryStatus()+as+status">
++++<span+*ngIf="status+===+'0';+else+innerElseBlock">
++++++++++++Something2
++++</span>
++++<ng-template+#innerElseBlock>
++++++++<span>
++++++++++++Something3_with_{{status}}%25
++++++++</span>
++++</ng-template>
</ng-container>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2624436|所以基本上这需要一个ng-container和ng-template的神奇组合。|unstyled|2624437|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;span *ngIf="!isProcessing(); else elseBlock"&gt;
        Something1
&lt;/span&gt;
&lt;ng-container #elseBlock *ngIf="queryStatus() as status"&gt;
    &lt;span *ngIf="status === '0'; else innerElseBlock"&gt;
            Something2
    &lt;/span&gt;
    &lt;ng-template #innerElseBlock&gt;
        &lt;span&gt;
            Something3_with_{{status}}%
        &lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/ng-container&gt;
</code></pre>

<p>So basically this need a magic combination of ng-container and ng-template.</p>


blocks|key|2413870|text|我听起来你想要ngSwitch。这允许您基于逻辑进行切换，您应该将其封装在组件中，而不是模板中。首先，让我们创建一个将我们的逻辑封装在组件中的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2413871|public+get+currentStep():+number+{
++if+(!this.isProcessing)+{
++++return+1;
++}+else+if+(this.queryStatus+===+0)+{
++++return+2;
++}+else+{
++++return+3;
++}
}|code-block|syntax|javascript|2413872|接下来，让我们将ngSwitch语句绑定到这个新创建的属性：|style|CODE|2413873|<div+[ngSwitch]="currentStep">
++++<div+*ngSwitchCase="1">
++++++++<p>Something1</p>
++++++++<div>Put+whatever+you+want+in+here!+Images,+etc.</div>
++++</div>
++++<div+*ngSwitchCase="2">
++++++++<p>Something2</p>
++++++++<p>Loading....</p>
++++</div>
++++<div+*ngSwitchCase="3">
++++++++<p>Something3</p>
++++++++<p>All+done!</p>
++++</div>
</div>|2413874|这应该会把你带到你想去的地方。由于这很简单，我created+a+stackblitz+example将演示它的一个工作版本。在这个示例中，您可以单击一个按钮并观察应用程序在所有步骤中的循环(我使用setTimeout来模拟一个长时间运行的服务器查询)。|2413875|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/NgSwitch|1|https://stackblitz.com/edit/angular-cgeasa?file=src%252Fapp%252Fapp.component.ts^0|7|8|0|0|0|8|8|0|0|2R|A|N|S|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@$A|16|B|17|K|L]]|9|@]|C|$]]|$1|M|3|N|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|O|3|P|5|6|7|19|8|@$A|1A|B|1B|K|L]]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>It sounds to me like you want <a href="https://angular.io/api/common/NgSwitch" rel="nofollow noreferrer">ngSwitch</a>. This allows you to switch based on logic, which you should encapsulate in your component, not your template. First, let's create a property that encapsulates our logic in our component:</p>

<pre><code>public get currentStep(): number {
  if (!this.isProcessing) {
    return 1;
  } else if (this.queryStatus === 0) {
    return 2;
  } else {
    return 3;
  }
}
</code></pre>

<p>Next, let's bind our <code>ngSwitch</code> statement to this newly-created property:</p>

<pre><code>&lt;div [ngSwitch]="currentStep"&gt;
    &lt;div *ngSwitchCase="1"&gt;
        &lt;p&gt;Something1&lt;/p&gt;
        &lt;div&gt;Put whatever you want in here! Images, etc.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchCase="2"&gt;
        &lt;p&gt;Something2&lt;/p&gt;
        &lt;p&gt;Loading....&lt;/p&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchCase="3"&gt;
        &lt;p&gt;Something3&lt;/p&gt;
        &lt;p&gt;All done!&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>That should get you where you need to go. Since this is simple, I <a href="https://stackblitz.com/edit/angular-cgeasa?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">created a stackblitz example</a> that will demonstrate a working version of this. In the example, you can click a button and watch the app cycle through all the steps (I'm using <code>setTimeout</code> to simulate a long-running server query).</p>


<p>So basically what I want is to show</p>

<ol>
<li>'Something1' when the job is not processing</li>
<li>'Something2' when the job is running and status is '0'</li>
<li>'Something3' when the job is running but status is something else</li>
</ol>

<p>I tried the following code snippet, but it looks like let-status in the outer template will never get assigned. Not sure whether the implementation is correct or not, could anyone give me two cents on how to make this logic work?</p>

<p>Thanks.</p>

<pre><code>&lt;span *ngIf="!isProcessing(); else elseBlock"&gt;
        Something1
&lt;/span&gt;
&lt;ng-template #elseBlock let-status="queryPlaybackStatus()" *ngIf="queryStatus() === '0'; else innerElseBlock"&gt;
    &lt;span&gt;
        Something2
    &lt;/span&gt;
    &lt;ng-template #innerElseBlock&gt;
        &lt;span&gt;
            Something3
        &lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/ng-template&gt;
</code></pre>


What is the proper way to show different elements based on function return

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以基本上我想要展示的是如果作业正在运行时状态不是processing'Something2‘，当作业正在运行但状态为其他状态时，状态为'0''Something3’，则为‘Something1’我尝试了以下代码片段，但看起来外部模板中的let-status永远不会被赋值。不确定实现是否正确，有没有人能给我两个关于如何...

问根据函数返回显示不同元素的正确方式是什么
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据函数返回显示不同元素的正确方式是什么EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据函数返回显示不同元素的正确方式是什么
EN