重新排列数组打字稿

时间：2019-01-24 23:32:02

标签： arrays typescript ionic-framework ionic3

是否可以在HTML中添加一个将列表项之一推到列表末尾的按钮？

就像重新排列列表一样，但不拖放；但是按下按钮时，第一个按钮即被推到列表的末尾。

我真的很感谢您的帮助。 这是typecipt的一部分：

    <?php
    $report = $_GET["report"];

    if(!isset($_COOKIE["vote"])) {
        setcookie("vote", "0", time() + 315360000, $_SERVER['REQUEST_URI']);
        $_COOKIE["vote"] = "0";
    }

    function upvote() {
        if(file_exists("DataUploads/".$GLOBALS['report'])) {
            if($_COOKIE["vote"] == "1") { // Problem: $_COOKIE is not being compared to "1" properly, always returns false
                $filename = "DataUploads/".$GLOBALS['report'];
                $line = 3;
                $lines = file($filename, FILE_IGNORE_NEW_LINES);
                $lines[$line] = (string)((int)$lines[$line] - 1);
                file_put_contents($filename, implode("\n", $lines));
                setcookie("vote", "0", time() + 315360000, $_SERVER['REQUEST_URI']);
                $_COOKIE["vote"] = "0";
            } else {
                $filename = "DataUploads/".$GLOBALS['report'];
                $line = 3;
                $lines = file($filename, FILE_IGNORE_NEW_LINES);
                if($_COOKIE["vote"] == "-1") {
                    $lines[$line] = (string)((int)$lines[$line] + 2);
                } else {
                    $lines[$line] = (string)((int)$lines[$line] + 1);
                }
                file_put_contents($filename, implode("\n", $lines));
                setcookie("vote", "1", time() + 315360000, $_SERVER['REQUEST_URI']);
                $_COOKIE["vote"] = "1";
            }
        }
    }

     function downvote() {
        if(file_exists("DataUploads/".$GLOBALS['report'])) {
            if($_COOKIE["vote"] == "-1") {
                $filename = "DataUploads/".$GLOBALS['report'];
                $line = 3;
                $lines = file($filename, FILE_IGNORE_NEW_LINES);
                $lines[$line] = (string)((int)$lines[$line] + 1);
                file_put_contents($filename, implode("\n", $lines));
                setcookie("vote", "0", time() + 315360000, $_SERVER['REQUEST_URI']);
                $_COOKIE["vote"] = "0";
            } else {
                $filename = "DataUploads/".$GLOBALS['report'];
                $line = 3;
                $lines = file($filename, FILE_IGNORE_NEW_LINES);
                if($_COOKIE["vote"] == "1") {
                    $lines[$line] = (string)((int)$lines[$line] - 2);
                } else {
                    $lines[$line] = (string)((int)$lines[$line] - 1);
                }
                file_put_contents($filename, implode("\n", $lines));
                setcookie("vote", "-1", time() + 315360000, $_SERVER['REQUEST_URI']);
                $_COOKIE["vote"] = "-1";
            }
        }
    }

    if($_POST["upvote_x"]) {
       upvote();
    }

    if($_POST["downvote_x"]) {
       downvote();
    }
?>
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <link rel="stylesheet" href="styles.css">
        <title>View Report</title>
        <link rel="icon" href="Images/favicon.ico" type="image/x-icon">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="header"></div>
        <div id="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="submit.html">Submit</a></li>
                <li><a href="submissions.php">View</a></li>
            </ul>
        </div>
        <div id="content">
            <ul style="list-style-type: none;"> 
                <?php
                    if(file_exists("DataUploads/".$GLOBALS['report'])) { // Check if the report exists
                        echo '<h2>Report Information:</h2>';
                        $data = file("DataUploads/".$GLOBALS['report']); // Gets array of lines in file

                        $upvote_button_url = $_COOKIE["vote"] == "1"?"Images/upvote.png":"Images/upvote_noclick.png";
                        $downvote_button_url = $_COOKIE["vote"] == "-1"?"Images/downvote.png":"Images/downvote_noclick.png";

                        echo '<h3 style="display:inline">Votes: </h3><p style="display:inline" class="wordwrap">'.$data[3].'</p>';
                        if($data[4] == "demo") {
                            echo "<br>";
                            echo "This is a demonstrational report, and cannot be voted on.";
                            echo "<br>";
                        } else {
                            echo '<form method="post">';
                            echo    '<input type="image" src="'.$upvote_button_url.'" name="upvote" id="upvote" value="Upvote" onclick="changeUpvoteImage()" /><br/>';
                            echo    '<input type="image" src="'.$downvote_button_url.'" name="downvote" id="downvote" value="Downvote" onclick="changeDownvoteImage()" /><br/>';
                            echo '</form>';
                            echo '<p>If a report has or has less than -40 votes, it will be deleted.</p>';
                        }

                        if(file_exists('ImageUploads/'.pathinfo($GLOBALS['report'], PATHINFO_FILENAME))) {
                            echo '<li><img src="ImageUploads/'.$GLOBALS['report'].'" style="max-height: 600px; max-width: 700px"></li>';
                        } else {
                            echo '<img src="Images/missing.png" width="25%"><br>';
                        }
                        echo '<li><h3 style="display:inline">Location: </h3><p style="display:inline" class="wordwrap">'.htmlspecialchars($data[0]).'</p></li>';
                        echo '<li><h3 style="display:inline">Description: </h3><p style="display:inline" class="wordwrap">'.htmlspecialchars($data[1]).'</p></li>';
                        echo '<li><b><h3 style="display:inline">Urgency: </h3>';
                        if($data[2] < 30) {
                            echo "<span style='color: #1f7725'>Low</span>";
                        } else if($data[2] < 50) {
                            echo "<span style='color: #77711e'>Medium</span>";
                        } else if($data[2] < 80) {
                            echo "<span style='color: #774e1e'>High</span>";
                        } else {
                            echo "<span style='color: #771e1e'>Immediate</span>";
                        }
                        echo "</b></li>";

                        function delete() {
                            if(file_exists("DataUploads/".$GLOBALS['report'])) {
                                unlink("DataUploads/".$GLOBALS['report']); //delete file
                            }
                            if(file_exists("ImageUploads/".$GLOBALS['report'])) {
                                unlink("ImageUploads/".$GLOBALS['report']); //delete file
                            }
                        }

                        if($data[3] <= -40 && $data[4] != "demo") {
                            delete();
                        }
                    } else {
                        echo '<h1>No report found with the name "'.$GLOBALS['report'].'". Check the URL!</h1>';
                        echo '<img src="Images/missing-report.jpg" width="50%">';
                    }
                ?>
            </ul>
            <br>
            <br>
            <br>
        </div>
        <script> 
            function getUrlVars() {
                var vars = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                    vars[key] = value;
                });
                return vars;
            }

            function getCookieValue(a) {
                var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
                return b ? b.pop() : '';
            }

            function changeUpvoteImage() {
                var img = document.getElementById("upvote");
                img.src = "Images/upvote.png";
                return false;
            }

            function changeDownvoteImage() {
                var img = document.getElementById("downvote");
                img.src = "Images/downvote.png";
                return false;
            }

            if(getCookieValue(getUrlVars("report") + "vote") == 1) {
                changeUpvoteImage();
            } else if(getCookieValue(getUrlVars("report") + "vote") == -1) {
                changeDownvoteImage();
            }
        </script>
        <script>
            if(window.history.replaceState) {
                window.history.replaceState(null, null, window.location.href);
            }
        </script>
    </body>
</html>

这是html：

cardz: Array< {}>; 
constructor(public navCtrl: NavController, public navParams: NavParams, public alerCtrl: AlertController, public toastCtrl: ToastController) {

this.cardz = [

  {id: '2', name: 'Trainer A', code: 1, isrc: "assets/img/t2.jpg", ppsrc: "assets/imgs/a.jpeg"},

  {id: '1',name: 'Trainer B', code: 2, isrc: "https://i.imgur.com/bbtiwSH.gif", ppsrc: "assets/imgs/b.jpeg"},

  {id: '3',name: 'Luan B.', code: 3, isrc: "https://i.imgur.com/S9pDBNv.gif", ppsrc: "assets/imgs/pp.jpg"},

  {id: '4',name: 'Trainer D', code: 4, isrc: "https://i.imgur.com/1v9LkYa.gif", ppsrc: "assets/imgs/pp1.jpg"},

  {id: '5',name: 'Trainer E', code: 5, isrc: "https://i.imgur.com/Xkvlm4B.gif", ppsrc: "assets/imgs/one.jpeg"}

2 个答案:

答案 0 :(得分：0)

如果您只想将第一个项目推到列表的末尾，可以这样做：

const reorderedCardz =
  cardz
    .slice(1) 
    .concat(head(cardz));

要使其具有类型安全性，我们需要确保该集合至少包含一个元素。让我们创建一个类型来支持我们的设计。

interface NonEmptyArray<T> extends Array<T> {
  0: T;
}

function head<T>(collection: NonEmptyArray<T>): T {
  return collection[0];
}

我们的模型现在看起来像这样：

interface Card {
    id: string;
    name: string;
    code: number;
    isrc: string;
    ppsrc: string;
}

const cardz: NonEmptyArray<Card> = [
  {id: '2', name: 'Trainer A', code: 1, isrc: "assets/img/t2.jpg", ppsrc: "assets/imgs/a.jpeg"},
  {id: '1',name: 'Trainer B', code: 2, isrc: "https://i.imgur.com/bbtiwSH.gif", ppsrc: "assets/imgs/b.jpeg"},
  {id: '3',name: 'Luan B.', code: 3, isrc: "https://i.imgur.com/S9pDBNv.gif", ppsrc: "assets/imgs/pp.jpg"},
  {id: '4',name: 'Trainer D', code: 4, isrc: "https://i.imgur.com/1v9LkYa.gif", ppsrc: "assets/imgs/pp1.jpg"},
  {id: '5',name: 'Trainer E', code: 5, isrc: "https://i.imgur.com/Xkvlm4B.gif", ppsrc: "assets/imgs/one.jpeg"}
];

我们的重新排序功能：

function reorder<T>(collection: NonEmptyArray<T>) {
    return (
        collection
          .slice(1)
          .concat(head(collection)) as NonEmptyArray<T>
    )
}

用法：

const reorderedCardz = reorder(cardz);

请参见TypeScript playground。

答案 1 :(得分：0)

我能够用以下几行来解决它：

later (no){
 var item = this.cardz[no];
this.cardz.splice(no,1);
this.cardz.push(item);
}

在HTML中，我只需要添加i 

<button ion-button icon-start clear small (click)="later(i)">
<ion-icon name="alarm"></ion-icon>
<div>Do later...</div>
</button>

希望这对遇到相同问题的人有所帮助：）

相关问题
最新问题