Angular:(ngFor)当我删除项目时如何防止它重新加载?

时间:2018-02-21 12:37:01

标签: angular ngfor

我的页面中有一个图像列表:

   <?php 
//date_default_timezone_set('Etc/UTC');
require_once 'PHPMailer/PHPMailerAutoload.php';
if(isset($_POST['submit']) && isset($_POST['email'])&& isset($_POST['message']))
{ 

    if(!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
    {
        //SHOW ERROR MESSAGE
    }
    else
    {
        $mail = new PHPMailer(true);                          // Passing `true` enables exceptions

        //Server settings
        $mail->SMTPDebug = 1;                                 // Enable verbose debug output
        $mail->isSMTP(true);                                  // Set mailer to use SMTP
        $mail->Host = 'smtp.Gmail.com';                       // Specify main and backup SMTP servers
        $mail->SMTPAuth = true;                               // Enable SMTP authentication
        $mail->Username = 'luckynath4@gmail.com';             // SMTP username
        $mail->Password = 'zedlucky@lucky';                   // SMTP password
        $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
        $mail->Port = 587;                                    // TCP port to connect to,25,587-tls,465-ssl.
        //$mail->AddCC($_POST['email'],$_POST['name']);
        $mail->WordWrap = 50;

        //Recipients
        $mail->setFrom($_POST['email'],$_POST['name']);
        $mail->addAddress("luckynath4@gmail.com","PROREX");    // Add a recipient


        //Content
        $mail->isHTML(true);                                  // Set email format to HTML
        $mail->Subject = "PROREX CONTACT";
        $mail->Body = "<h3>".$_POST['message']."</h3>";

         if( $mail->send())
         {
             //echo "email was send";
             echo '<script language="javascript">';
             echo 'alert("message successfully sent")';
             echo '</script>';
             header("location: index.php");

             exit();
         }
         else
         {
             echo 'Mailer error: ' . $mail->ErrorInfo;
         }   


    }   
}
?>   

问题在于,每次删除图片时,都会重新创建上一个列表,并重新加载所有图像。当我删除项目时,如何防止它重新加载图像?有没有替代ngFor指令?

1 个答案:

答案 0 :(得分:2)

按照here

的说明使用trackBy
  

我们可以帮助Angular跟踪通过提供添加或删除的项目   trackBy函数。 trackBy函数获取索引和   当前项作为参数,需要返回唯一标识符   这个项目。现在,当您更改集合时,Angular可以跟踪   根据独特的内容添加或删除了哪些项目   标识符,只创建或销毁更改的内容。

<img *ngFor="let picture of pictures; trackBy: trackImageId" [src]="picture.path">

trackImageId(index: number, picture: PictureModel) {
        return picture.id;
    }