Question

我有一个json对象，我想一个一个地显示项目。当我使用Angular ng时，所有的项目都显示在屏幕上。我想显示第一个，当我单击按钮时显示下一个直到最后。我尝试使用Angular ngIF，但失败了。

<ion-header>
 <ion-toolbar>
  <ion-buttons slot="start">
  <ion-icon size="large" color="warning" name="arrow-round-back" 
  (click)="abort()"></ion-icon>
  </ion-buttons>
 <ion-title></ion-title>
 </ion-toolbar>
</ion-header>

<ion-content padding>    
<ion-card *ngFor="let w of warmup;">
 <ion-card-header>
  <ion-card-title>
    {{w.title}}
  </ion-card-title>
  <ion-card-content>
    <img src="{{w.url}}">
  </ion-card-content>
</ion-card-header>
<ion-button slot="end" size="small" (click)="done">DONE</ion-button>
</ion-card>
</ion-content>

您还可以看到我的意思的图像。Screenshot

Answer 1

尝试使用角度slicePipe

https://angular.io/api/common/SlicePipe

在组件ts中创建一个noOfItem = 1

*ngFor="let w of warmup | slice:0:noOfItem"

然后根据您的逻辑控制noOfItem

Answer 2

您将必须维护另一个包含模板的数组。

class ContextExtractor(tf.keras.Model):
        def __init__(self, model_name, pretrained_shape):
            super().__init__()
            self.model = self.__get_model(model_name, pretrained_shape)

        def call(self, x, training=False, **kwargs):
            features = self.model(x, training=training)
            return features

        def __get_model(self, model_name, pretrained_shape):
            if model_name == "mobilenetv2":
                return MobileNetV2(input_shape=pretrained_shape,
                                   weights='imagenet',
                                   alpha=0.35,
                                   include_top=False,
                                   pooling='avg')

context_extractor = ContextExtractor("mobilenetv2", (224, 224, 3))
bc = tf.random.uniform((10, 224, 224, 3))

a1 = context_extractor(bc, training=False)
print(hash(a1[0].numpy().tobytes()))
# -8545286774071995675
a2 = context_extractor(bc[:2], training=False)
print(hash(a2[0].numpy().tobytes()))
# -8545286774071995675 <-- the same

a3 = context_extractor(bc[:1], training=False)
print(hash(a3[0].numpy().tobytes()))
# 8191470914604248680 <-- another result!

您的ts文件将为：

<ion-card *ngFor="let w of warmupTemp;" [w]="w"></<ion-card>

显示ng一一对应的Ionic 4

2 个答案: