Question

我的代码为<?php $servername = "localhost"; $username = "root"; $password = "1234"; $dbname = "bdconsultas"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "insert into tconsultas(nombre,mail,mensaje) values ('$_REQUEST[nombre]','$_REQUEST[mail]','$_REQUEST[mensaje]')"; if ($conn->query($sql) === TRUE) { echo "New record created successfully"; } else { echo "Error: " . $sql . "<br>" . $conn->error; } $conn->close();

*ngFor

如何打印出那样的结果？

settings = dropDownLists: [
   {name: 'Fac'},
   {name: 'Type'},
   {name: 'Course'},
   {name: 'Group'}
]

<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists">
    <div class="scheduleText"> {{dropDownList.name}} </div>
</div>

Answer 1

解决方案1

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index;
                                                                  let even = even;">
    <div class="alingFloat" *ngIf="even">
        <div class="scheduleText"> {{settings.dropDownLists[i].name}} </div>
        <div class="scheduleText" *ngIf="settings.dropDownLists[i+1]?.name"> 
            {{settings.dropDownLists[i+1].name}} 
        </div>
    </div>
</ng-container>

解决方案2和我住的地方

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index; 
                                                                  let even = even;
                                                                  let last = last;">
    <div class="alingFloat" *ngIf="even">
        <div class="scheduleText" *ngFor="let dropDownList2 of settings.dropDownLists | 
                                                slice:0: last ? 1 : 2; let k = index;">
            {{settings.dropDownLists[i+k].name}} 
        </div>
    </div>
</ng-container>

Answer 2

根据索引号简单地优化数组/ * ngFor。并把你想要的条件放在这个

settings = dropDownLists: [
   {name: 'Fac'},
   {name: 'Type'},
   {name: 'Course'},
   {name: 'Group'}
]



<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index">
    <div class="scheduleText" *ngIf='i == 0'> Fac </div>
    <div class="scheduleText" *ngIf='i == 1'> Type </div>
</div>
<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index">
    <div class="scheduleText" *ngIf='i == 2'> Curse </div>
    <div class="scheduleText" *ngIf='i == 3'> Group </div>
</div>

但是如果您在数组中未定义任何条目，则通常不首选此方法

Answer 3

我不知道整个案例，但如果你想要印有两个元素的div，我会像这样做

var initArray = [{ name: 'Fac' },
    { name: 'Type' },
    { name: 'Course' },
    { name: 'Group' }
    ];
    var settings =  initArray.reduce(function (prev, item) {
      var index = initArray.indexOf(item) % 2;
      if (!prev[index]) prev[index] = [];
      prev[index].push(item);
      return prev;
    }, []);

然后在模板中

<div class="alingFloat" *ngFor="let dropDownList of settings;">
    <div class="scheduleText" *ngFor="let element of dropDownList;"> {{element.name}} 1</div>
</div>

结果

<div _ngcontent-axv-3="" class="alingFloat">
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Fac</div><div _ngcontent-axv-3="" class="scheduleText"> Course</div>
  </div>
  <div _ngcontent-axv-3="" class="alingFloat">
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Type</div><div _ngcontent-axv-3="" class="scheduleText"> Group</div>
  </div>

* ng特定条件Angular 2

3 个答案: