Question

我试图在Angular 4中使用* ngIf和* ngFor进行多重绑定但是我有这个错误：

代码：

   <agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
    <agm-marker *ngFor="let o of m" [latitude]="o.latitude" [longitude]="o.longitude" iconUrl='../../assets/img/icon-pin.png' *ngIf="(o.breakdown == false || o.on_service == false)" iconUrl='../../assets/img/pin-maintenance.png' ></agm-marker>
  </agm-map>

我也试过这段代码但也错了：

   <agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
    <agm-marker *ngFor="let o of m" [latitude]="o.latitude" [longitude]="o.longitude" iconUrl='../../assets/img/icon-pin.png' *ngIf="(!o.breakdown || !o.on_service )" iconUrl='../../assets/img/pin-maintenance.png' ></agm-marker>
  </agm-map>

Answer 1

尝试使用<ng-container>标记。它是一个非美学标签，可用于执行多个指令。

在你的代码中可能会变成：

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
  <ng-container *ngFor="let o of m">
      <agm-marker [latitude]="o.latitude" [longitude]="o.longitude" iconUrl='../../assets/img/icon-pin.png' *ngIf="(o.breakdown == false || o.on_service == false)" iconUrl='../../assets/img/pin-maintenance.png' ></agm-marker>
   </ng-container>
  </agm-map>

请记住，在另一个指令下使用指令时，您可以访问父指令值。
我解释得更好。在此示例中，您可以从内部agm-marker标记访问其父标记指令中的“o”值，该指令是ng-container上使用的“o”值

Answer 2

意味着您不能在同一元素上使用两个结构指令 - 前缀为*的指令。像这样把它们分开

<agm-marker *ngFor="let o of m" [latitude]="o.latitude" [longitude]="o.longitude" [iconUrl]='(o.breakdown == false || o.on_service == false) ? "../../assets/img/icon-pin.png" : "../../assets/img/pin-maintenance.png"'>

</agm-marker>

Answer 3

您不能在同一元素上使用两个结构指令。

您需要将元素包装在另一个元素中。

建议使用<ng-container *ngFor="let o of m"> <agm-marker *ngIf="(o.breakdown == false || o.on_service == false)" [latitude]="o.latitude" [longitude]="o.longitude" [iconUrl]='(o.breakdown == false || o.on_service == false) ? "../../assets/img/icon-pin.png" : "../../assets/img/pin-maintenance.png"'> </agm-marker> </ng-container>，因为它不会在DOM中呈现。

import Foundation
import Firebase

class FirebaseManager {
    var uid: String?
    var databaseRootRef: DatabaseReference?
    var storageRootRef: StorageReference?
    var authentication: Auth?

    init() {

    }

    func initialize() {
        uid = Auth.auth().currentUser?.uid
        databaseRootRef = Database.database().reference()
        storageRootRef = Storage.storage().reference()
        authentication = Auth.auth()
    }

    func isAuthenticated() -> Bool {
        return authentication?.currentUser != nil
    }

    func registerUserWith(name: String, email: String, password: String, completionHandler: (@escaping (User?, Error?) -> Void)) {
    authentication?.signIn(withEmail: email, password: password, completion: { (user, error) in
            completionHandler(user, error)
        })
    }
}

Answer 4

同一个标签上不允许使用多个结构指令。

如果你想使用结构指令的多个绑定，那么你可以遵循这些解决方案......

解决方案1 

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
  <agm-marker 
    ngFor let-o [ngForOf]="m"
    [latitude]="o.latitude" 
    [longitude]="o.longitude" 
    iconUrl='../../assets/img/icon-pin.png' 
    *ngIf="(o.breakdown == false || o.on_service == false)" 
    iconUrl='../../assets/img/pin-maintenance.png' >
  </agm-marker>

解决方案2 （ng-container不以HTML格式呈现）

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
 <ng-container *ngFor="let o of m">
   <agm-marker
    [latitude]="o.latitude" 
    [longitude]="o.longitude" 
    iconUrl='../../assets/img/icon-pin.png' 
    *ngIf="(o.breakdown == false || o.on_service == false)" 
    iconUrl='../../assets/img/pin-maintenance.png' >
   </agm-marker>
<ng-container>

根据您的要求，您需要基于条件的 iconUrl 属性绑定。所以在这里你可以像这样使用三元运算符......

<agm-map *ngFor="let m of dataBikes" [latitude]="lat" [longitude]="lng">
   <agm-marker
     [latitude]="o.latitude" 
     [longitude]="o.longitude" 
     iconUrl="{{(o.breakdown == false || o.on_service == false)?'../../assets/img/icon-pin.png':'../../assets/img/pin-maintenance.png'}}" 
    </agm-marker>
</agm-map>

Angular 4中的多个指令

4 个答案: